From 309d6982e814ffe826093d37227d2751d7e34424 Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Fri, 6 Mar 2026 14:43:07 +0100
Subject: [PATCH] commcoach: voice state machine replacing distributed
 useEffect logic

Made-with: Cursor
---
 src/hooks/useCommcoach.ts                     |  86 ++-
 .../CommcoachCoachingView.module.css          | 402 -------------
 .../views/commcoach/CommcoachCoachingView.tsx | 526 ------------------
 .../views/commcoach/CommcoachDossierView.tsx  | 223 ++++----
 4 files changed, 163 insertions(+), 1074 deletions(-)
 delete mode 100644 src/pages/views/commcoach/CommcoachCoachingView.module.css
 delete mode 100644 src/pages/views/commcoach/CommcoachCoachingView.tsx

diff --git a/src/hooks/useCommcoach.ts b/src/hooks/useCommcoach.ts
index a2abe8f..7a8c5df 100644
--- a/src/hooks/useCommcoach.ts
+++ b/src/hooks/useCommcoach.ts
@@ -16,6 +16,8 @@ import {
   type CoachingTask, type CoachingScore, type SSEEvent,
 } from '../api/commcoachApi';
 
+export type TtsEvent = 'playing' | 'ended' | 'paused' | 'error';
+
 export interface CommcoachHookReturn {
   contexts: CoachingContext[];
   selectedContextId: string | null;
@@ -46,12 +48,11 @@ export interface CommcoachHookReturn {
   completeSession: () => Promise<void>;
   cancelSession: () => Promise<void>;
 
-  isMuted: boolean;
-  setMuted: (muted: boolean) => void;
   stopTts: () => void;
   resumeTts: () => void;
-  wasInterrupted: boolean;
-  isTtsPlayingRef: MutableRefObject<boolean>;
+  hasAudioToResume: () => boolean;
+
+  onTtsEventRef: MutableRefObject<((event: TtsEvent) => void) | null>;
 
   actionLoading: string | null;
 
@@ -86,14 +87,11 @@ export function useCommcoach(): CommcoachHookReturn {
   const [error, setError] = useState<string | null>(null);
   const [inputValue, setInputValue] = useState('');
 
-  const [isMuted, setIsMuted] = useState(false);
-  const [wasInterrupted, setWasInterrupted] = useState(false);
   const [actionLoading, setActionLoading] = useState<string | null>(null);
 
   const isMountedRef = useRef(true);
   const currentAudioRef = useRef<HTMLAudioElement | null>(null);
-  const isTtsPlayingRef = useRef(false);
-  const lastTtsAudioRef = useRef<string | null>(null);
+  const onTtsEventRef = useRef<((event: TtsEvent) => void) | null>(null);
   const onDocumentCreatedRef = useRef<((doc: any) => void) | null>(null);
 
   useEffect(() => { isMountedRef.current = true; return () => { isMountedRef.current = false; }; }, []);
@@ -112,62 +110,53 @@ export function useCommcoach(): CommcoachHookReturn {
     }
   }, [request, instanceId]);
 
+  const _emitTts = useCallback((event: TtsEvent) => {
+    (window as any).__dlog?.(`TTS-${event.toUpperCase()}`);
+    onTtsEventRef.current?.(event);
+  }, []);
+
   const _playTtsAudio = useCallback((audioB64: string) => {
     if (!audioB64 || !isMountedRef.current) return;
     if (currentAudioRef.current) {
       currentAudioRef.current.pause();
       currentAudioRef.current = null;
     }
-    lastTtsAudioRef.current = audioB64;
-    setWasInterrupted(false);
-    isTtsPlayingRef.current = true;
     try {
       const audio = new Audio(`data:audio/mp3;base64,${audioB64}`);
       currentAudioRef.current = audio;
-      // #region agent log
-      audio.onpause = () => { (window as any).__dlog?.('TTS-PAUSE', `t=${audio.currentTime.toFixed(1)} dur=${audio.duration.toFixed(1)}`); };
-      // #endregion
       audio.onended = () => {
-        // #region agent log
-        (window as any).__dlog?.('TTS-ENDED', `dur=${audio.duration.toFixed(1)}`);
-        // #endregion
         currentAudioRef.current = null;
-        isTtsPlayingRef.current = false;
+        _emitTts('ended');
       };
       audio.play().then(() => {
-        // #region agent log
-        (window as any).__dlog?.('TTS-PLAY', `dur=${audio.duration.toFixed(1)}`);
-        // #endregion
-      }).catch((e) => {
-        // #region agent log
-        (window as any).__dlog?.('TTS-PLAY-ERR', e?.message || 'unknown');
-        // #endregion
-        isTtsPlayingRef.current = false;
+        _emitTts('playing');
+      }).catch(() => {
+        _emitTts('error');
       });
     } catch {
-      isTtsPlayingRef.current = false;
+      _emitTts('error');
     }
-  }, []);
+  }, [_emitTts]);
 
   const stopTts = useCallback(() => {
-    // #region agent log
-    (window as any).__dlog?.('STOP-TTS', `playing=${isTtsPlayingRef.current} hasAudio=${!!currentAudioRef.current}`);
-    // #endregion
     if (currentAudioRef.current) {
       currentAudioRef.current.pause();
+      _emitTts('paused');
     }
-    if (isTtsPlayingRef.current) {
-      setWasInterrupted(true);
-    }
-    isTtsPlayingRef.current = false;
-  }, []);
+  }, [_emitTts]);
 
   const resumeTts = useCallback(() => {
     if (currentAudioRef.current && currentAudioRef.current.paused) {
-      isTtsPlayingRef.current = true;
-      setWasInterrupted(false);
-      currentAudioRef.current.play().catch(() => { isTtsPlayingRef.current = false; });
+      currentAudioRef.current.play().then(() => {
+        _emitTts('playing');
+      }).catch(() => {
+        _emitTts('error');
+      });
     }
+  }, [_emitTts]);
+
+  const hasAudioToResume = useCallback(() => {
+    return !!(currentAudioRef.current && currentAudioRef.current.paused && currentAudioRef.current.currentTime > 0);
   }, []);
 
   const selectContext = useCallback(async (contextId: string, options?: { skipSessionResume?: boolean }) => {
@@ -269,7 +258,6 @@ export function useCommcoach(): CommcoachHookReturn {
     setActionLoading('starting');
     await _unlockAudioForTts();
     setError(null);
-    setIsMuted(false);
     setIsStreaming(true);
     setStreamingStatus(null);
     setMessages([]);
@@ -287,7 +275,6 @@ export function useCommcoach(): CommcoachHookReturn {
             const sess = eventData.session;
             if (sess) {
               setSession(sess);
-              setIsMuted(false);
             }
             if (eventData.resumed && Array.isArray(eventData.messages)) {
               setMessages(eventData.messages);
@@ -350,7 +337,10 @@ export function useCommcoach(): CommcoachHookReturn {
   const sendMessage = useCallback(async (content: string) => {
     const normalizedContent = content.trim();
     if (!normalizedContent || !instanceId || !session) return;
-    stopTts();
+    if (currentAudioRef.current) {
+      currentAudioRef.current.pause();
+      currentAudioRef.current = null;
+    }
     await _unlockAudioForTts();
     setError(null);
     setIsStreaming(true);
@@ -434,11 +424,14 @@ export function useCommcoach(): CommcoachHookReturn {
         setIsStreaming(false);
       }
     }
-  }, [instanceId, session, _playTtsAudio, stopTts]);
+  }, [instanceId, session, _playTtsAudio]);
 
   const sendAudio = useCallback(async (audioBlob: Blob) => {
     if (!instanceId || !session) return;
-    stopTts();
+    if (currentAudioRef.current) {
+      currentAudioRef.current.pause();
+      currentAudioRef.current = null;
+    }
     await _unlockAudioForTts();
     setError(null);
     setIsStreaming(true);
@@ -500,7 +493,7 @@ export function useCommcoach(): CommcoachHookReturn {
         setIsStreaming(false);
       }
     }
-  }, [instanceId, session, stopTts]);
+  }, [instanceId, session]);
 
   const completeSessionCb = useCallback(async () => {
     if (!instanceId || !session) return;
@@ -583,7 +576,8 @@ export function useCommcoach(): CommcoachHookReturn {
     selectContext, createContext, archiveContext,
     startSession: startSessionCb,
     sendMessage, sendAudio, completeSession: completeSessionCb, cancelSession: cancelSessionCb,
-    isMuted, setMuted: setIsMuted, stopTts, resumeTts, wasInterrupted, isTtsPlayingRef,
+    stopTts, resumeTts, hasAudioToResume,
+    onTtsEventRef,
     actionLoading,
     toggleTaskStatus, addTask, removeTask,
     onDocumentCreatedRef,
diff --git a/src/pages/views/commcoach/CommcoachCoachingView.module.css b/src/pages/views/commcoach/CommcoachCoachingView.module.css
deleted file mode 100644
index b898159..0000000
--- a/src/pages/views/commcoach/CommcoachCoachingView.module.css
+++ /dev/null
@@ -1,402 +0,0 @@
-.coaching {
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 140px);
-  overflow: hidden;
-}
-
-/* Context Tabs */
-.contextBar {
-  border-bottom: 1px solid var(--border-color, #e0e0e0);
-  padding: 0.5rem 1rem;
-  flex-shrink: 0;
-}
-
-.contextTabs {
-  display: flex;
-  gap: 0.5rem;
-  overflow-x: auto;
-  align-items: center;
-}
-
-.contextTab {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.4rem 0.75rem;
-  border: 1px solid var(--border-color, #e0e0e0);
-  border-radius: 20px;
-  background: var(--bg-card, #fff);
-  cursor: pointer;
-  font-size: 0.8rem;
-  white-space: nowrap;
-  transition: all 0.15s;
-  color: var(--text-primary, #333);
-}
-
-.contextTab:hover {
-  background: var(--bg-hover, #f5f5f5);
-}
-
-.contextTabActive {
-  background: var(--primary-color, #F25843);
-  color: #fff;
-  border-color: var(--primary-color, #F25843);
-}
-
-.contextTabIcon {
-  font-weight: 700;
-  font-size: 0.75rem;
-}
-
-.contextTabLabel {
-  max-width: 120px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.contextTabNew {
-  width: 32px;
-  height: 32px;
-  border: 1px dashed var(--border-color, #ccc);
-  border-radius: 50%;
-  background: transparent;
-  cursor: pointer;
-  font-size: 1.2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-secondary, #888);
-  flex-shrink: 0;
-}
-
-.contextTabNew:hover {
-  background: var(--bg-hover, #f5f5f5);
-  color: var(--primary-color, #F25843);
-}
-
-/* New Context Form */
-.newContextForm {
-  padding: 1rem;
-  background: var(--bg-card, #fff);
-  border-bottom: 1px solid var(--border-color, #e0e0e0);
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.newContextInput,
-.newContextSelect {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--border-color, #ddd);
-  border-radius: 6px;
-  font-size: 0.9rem;
-  background: var(--bg-input, #fff);
-  color: var(--text-primary, #333);
-}
-
-.newContextActions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-/* Buttons */
-.btnPrimary {
-  padding: 0.5rem 1.25rem;
-  background: var(--primary-color, #F25843);
-  color: #fff;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 0.85rem;
-  font-weight: 500;
-}
-
-.btnPrimary:hover:not(:disabled) { filter: brightness(1.08); }
-.btnPrimary:disabled {
-  background: var(--color-medium-gray, #ccc);
-  color: var(--text-secondary, #888);
-  cursor: not-allowed;
-  opacity: 0.8;
-}
-
-.btnSecondary {
-  padding: 0.5rem 1.25rem;
-  background: transparent;
-  color: var(--text-primary, #333);
-  border: 1px solid var(--border-color, #ddd);
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 0.85rem;
-}
-
-.btnSecondary:hover:not(:disabled) {
-  background: var(--hover-bg, #f5f5f5);
-  border-color: var(--primary-color, #F25843);
-  color: var(--primary-color, #F25843);
-}
-
-.btnSmall {
-  padding: 0.3rem 0.75rem;
-  background: var(--primary-color, #F25843);
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.8rem;
-}
-
-.btnSmall:hover:not(:disabled) { filter: brightness(1.08); }
-
-.btnSmallDanger {
-  padding: 0.3rem 0.75rem;
-  background: transparent;
-  color: var(--error-color, #dc2626);
-  border: 1px solid var(--error-color, #dc2626);
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.8rem;
-}
-
-.btnSmallDanger:hover:not(:disabled) {
-  background: var(--error-color, #dc2626);
-  color: #fff;
-}
-
-/* No context */
-.noContext {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  text-align: center;
-  padding: 2rem;
-  color: var(--text-secondary, #666);
-}
-
-.noContext h3 {
-  color: var(--text-primary, #333);
-  margin-bottom: 0.5rem;
-}
-
-.noContext p {
-  margin-bottom: 1rem;
-}
-
-/* Chat Area */
-.chatArea {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.sessionStart {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  text-align: center;
-  padding: 2rem;
-}
-
-.sessionStart h3 {
-  color: var(--text-primary, #333);
-  margin-bottom: 0.5rem;
-}
-
-.sessionStart p {
-  color: var(--text-secondary, #666);
-  margin-bottom: 1rem;
-}
-
-.sessionHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  background: var(--bg-card, #fff);
-  border-bottom: 1px solid var(--border-color, #e0e0e0);
-  flex-shrink: 0;
-}
-
-.sessionLabel {
-  font-size: 0.85rem;
-  font-weight: 500;
-  color: var(--text-primary, #333);
-}
-
-.sessionActions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-/* Messages */
-.messages {
-  flex: 1;
-  padding: 1rem;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.message {
-  max-width: 80%;
-}
-
-.messageUser {
-  align-self: flex-end;
-}
-
-.messageAssistant {
-  align-self: flex-start;
-}
-
-.messageBubble {
-  padding: 0.75rem 1rem;
-  border-radius: 12px;
-  font-size: 0.9rem;
-  line-height: 1.5;
-}
-
-.messageUser .messageBubble {
-  background: var(--primary-color, #F25843);
-  color: #fff;
-  border-bottom-right-radius: 4px;
-}
-
-.messageLive {
-  opacity: 0.7;
-  font-style: italic;
-  border: 1px dashed rgba(255, 255, 255, 0.4);
-}
-
-.messageAssistant .messageBubble {
-  background: var(--bg-card, #f5f5f5);
-  color: var(--text-primary, #333);
-  border: 1px solid var(--border-color, #e0e0e0);
-  border-bottom-left-radius: 4px;
-}
-
-.messageBubble p {
-  margin: 0 0 0.5rem;
-}
-
-.messageBubble p:last-child {
-  margin-bottom: 0;
-}
-
-.messageTime {
-  font-size: 0.7rem;
-  color: var(--text-secondary, #999);
-  margin-top: 0.2rem;
-  padding: 0 0.25rem;
-}
-
-.messageUser .messageTime {
-  text-align: right;
-}
-
-.typing {
-  color: var(--text-secondary, #888);
-  font-style: italic;
-}
-
-.typingDots {
-  animation: blink 1.4s infinite both;
-}
-
-@keyframes blink {
-  0%, 80%, 100% { opacity: 0; }
-  40% { opacity: 1; }
-}
-
-/* Input */
-.inputArea {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  border-top: 1px solid var(--border-color, #e0e0e0);
-  background: var(--bg-card, #fff);
-  flex-shrink: 0;
-}
-
-.textInputRow {
-  display: flex;
-  gap: 0.5rem;
-  align-items: flex-end;
-}
-
-.textInput {
-  flex: 1;
-  min-width: 0;
-  padding: 0.6rem 0.75rem;
-  border: 1px solid var(--border-color, #ddd);
-  border-radius: 8px;
-  resize: none;
-  font-size: 0.9rem;
-  font-family: inherit;
-  min-height: 40px;
-  max-height: 120px;
-  background: var(--bg-input, #fff);
-  color: var(--text-primary, #333);
-}
-
-.sendBtn {
-  padding: 0.6rem 1.25rem;
-  background: var(--primary-color, #F25843);
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 0.85rem;
-  font-weight: 500;
-  align-self: flex-end;
-}
-
-.sendBtn:hover:not(:disabled) { filter: brightness(1.08); }
-.sendBtn:disabled {
-  background: var(--color-medium-gray, #ccc);
-  color: var(--text-secondary, #888);
-  cursor: not-allowed;
-  opacity: 0.8;
-}
-
-.voiceStatus {
-  display: flex;
-  align-items: center;
-  padding: 0.25rem 0;
-  min-height: 1.5rem;
-}
-
-.voiceIndicator {
-  font-size: 0.9rem;
-  color: var(--text-secondary, #888);
-}
-
-.voiceIndicator.voiceActive {
-  color: var(--primary-color, #F25843);
-  font-weight: 500;
-}
-
-.voiceActive {
-  border: 2px solid #22c55e;
-}
-
-.mutedActive {
-  background: var(--color-medium-gray, #999);
-  color: #fff;
-  border-color: var(--color-medium-gray, #999);
-}
-
-.errorBanner {
-  padding: 0.5rem 1rem;
-  background: #fde8e8;
-  color: var(--color-error, #d32f2f);
-  font-size: 0.85rem;
-  text-align: center;
-}
diff --git a/src/pages/views/commcoach/CommcoachCoachingView.tsx b/src/pages/views/commcoach/CommcoachCoachingView.tsx
deleted file mode 100644
index ff07215..0000000
--- a/src/pages/views/commcoach/CommcoachCoachingView.tsx
+++ /dev/null
@@ -1,526 +0,0 @@
-/**
- * CommCoach Coaching View
- *
- * Voice first, always with text fallback (CONCEPT.md).
- * Chat und Voice parallel: Mikrofon und Texteingabe gleichzeitig nutzbar.
- * Mute: nur Mikrofon stummschalten, kein Moduswechsel.
- */
-
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { useCommcoach } from '../../../hooks/useCommcoach';
-import { useApiRequest } from '../../../hooks/useApi';
-import { useInstanceId } from '../../../hooks/useCurrentInstance';
-import { getPersonasApi, type CoachingPersona } from '../../../api/commcoachApi';
-import AutoScroll from '../../../components/UiComponents/AutoScroll/AutoScroll';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import styles from './CommcoachCoachingView.module.css';
-
-export const CommcoachCoachingView: React.FC = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const coach = useCommcoach();
-  const { request } = useApiRequest();
-  const instanceId = useInstanceId();
-  const [showNewContext, setShowNewContext] = useState(false);
-  const [newTitle, setNewTitle] = useState('');
-  const [newDescription, setNewDescription] = useState('');
-  const [newCategory, setNewCategory] = useState('custom');
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const [personas, setPersonas] = useState<CoachingPersona[]>([]);
-  const [selectedPersonaId, setSelectedPersonaId] = useState<string | undefined>(undefined);
-
-  const streamRef = useRef<MediaStream | null>(null);
-  const speechRecognitionRef = useRef<SpeechRecognition | null>(null);
-  const transcriptPartsRef = useRef<string[]>([]);
-  const processedResultIndexRef = useRef(0);
-  const silenceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [isListening, setIsListening] = useState(false);
-  const [isUserSpeaking, setIsUserSpeaking] = useState(false);
-  const [liveTranscript, setLiveTranscript] = useState('');
-  const [isTtsPlaying, setIsTtsPlaying] = useState(false);
-
-  const handleSend = useCallback(async () => {
-    if (!coach.inputValue.trim() || coach.isStreaming) return;
-    await coach.sendMessage(coach.inputValue);
-  }, [coach]);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  }, [handleSend]);
-
-  const handleCreateContext = useCallback(async () => {
-    if (!newTitle.trim()) return;
-    await coach.createContext(newTitle, newDescription || undefined, newCategory);
-    setNewTitle('');
-    setNewDescription('');
-    setNewCategory('custom');
-    setShowNewContext(false);
-  }, [newTitle, newDescription, newCategory, coach]);
-
-  useEffect(() => {
-    const contextId = searchParams.get('context');
-    if (contextId && coach.contexts.some(c => c.id === contextId)) {
-      coach.selectContext(contextId);
-      setSearchParams({}, { replace: true });
-    }
-  }, [searchParams, coach.contexts, coach.selectContext, setSearchParams]);
-
-  useEffect(() => {
-    if (coach.session && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [coach.session]);
-
-  useEffect(() => {
-    if (!coach.session) {
-      coach.setMuted(false);
-    }
-  }, [coach.session]);
-
-  useEffect(() => {
-    if (!instanceId) return;
-    getPersonasApi(request, instanceId)
-      .then(p => setPersonas(p))
-      .catch(() => {});
-  }, [instanceId, request]);
-
-  useEffect(() => {
-    if (!coach.session) return;
-    const interval = setInterval(() => {
-      setIsTtsPlaying(coach.isTtsPlayingRef.current);
-    }, 200);
-    return () => clearInterval(interval);
-  }, [coach.session, coach.isTtsPlayingRef]);
-
-  useEffect(() => {
-    if (!coach.session || coach.isMuted) {
-      if (speechRecognitionRef.current) {
-        try {
-          speechRecognitionRef.current.stop();
-        } catch {
-          // ignore
-        }
-        speechRecognitionRef.current = null;
-      }
-      if (streamRef.current) {
-        streamRef.current.getTracks().forEach((t) => t.stop());
-        streamRef.current = null;
-      }
-      setIsListening(false);
-      setIsUserSpeaking(false);
-      return;
-    }
-
-    const SpeechRecognitionApi = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
-    if (!SpeechRecognitionApi) {
-      console.warn('SpeechRecognition not supported');
-      return;
-    }
-
-    let cancelled = false;
-    const MIN_WORDS_TO_INTERRUPT = 2;
-    const lang = 'de-DE';
-
-    const init = async () => {
-      try {
-        const stream = await navigator.mediaDevices.getUserMedia({
-          audio: { echoCancellation: true, noiseSuppression: true },
-        });
-        if (cancelled) {
-          stream.getTracks().forEach((t) => t.stop());
-          return;
-        }
-        streamRef.current = stream;
-        setIsListening(true);
-
-        const recognition = new SpeechRecognitionApi();
-        recognition.continuous = true;
-        recognition.interimResults = true;
-        recognition.lang = lang;
-
-        recognition.onstart = () => {
-          if (cancelled) return;
-        };
-
-        const SILENCE_TIMEOUT_MS = 5000;
-
-        const _sendAndClearTranscript = () => {
-          const fullTranscript = transcriptPartsRef.current.join(' ').trim();
-          if (fullTranscript) {
-            const wordCount = fullTranscript.split(/\s+/).filter(Boolean).length;
-            if (wordCount >= MIN_WORDS_TO_INTERRUPT) coach.sendMessage(fullTranscript);
-          }
-          transcriptPartsRef.current = [];
-          processedResultIndexRef.current = 0;
-          setLiveTranscript('');
-          setIsUserSpeaking(false);
-        };
-
-        const _resetSilenceTimer = () => {
-          if (silenceTimerRef.current) clearTimeout(silenceTimerRef.current);
-          silenceTimerRef.current = setTimeout(() => {
-            if (cancelled) return;
-            _sendAndClearTranscript();
-          }, SILENCE_TIMEOUT_MS);
-        };
-
-        recognition.onspeechstart = () => {
-          if (cancelled || coach.isTtsPlayingRef.current) return;
-          setIsUserSpeaking(true);
-          transcriptPartsRef.current = [];
-          processedResultIndexRef.current = 0;
-          setLiveTranscript('');
-          _resetSilenceTimer();
-        };
-
-        recognition.onresult = (event: SpeechRecognitionEvent) => {
-          if (cancelled || coach.isTtsPlayingRef.current) return;
-          const interimParts: string[] = [];
-          for (let i = processedResultIndexRef.current; i < event.results.length; i++) {
-            const r = event.results[i];
-            if (r.isFinal) {
-              const text = r[0].transcript.trim();
-              if (text) transcriptPartsRef.current.push(text);
-              processedResultIndexRef.current = i + 1;
-            } else {
-              const text = r[0].transcript.trim();
-              if (text) interimParts.push(text);
-            }
-          }
-          const currentInterim = interimParts.join(' ');
-          const preview = [...transcriptPartsRef.current, currentInterim].join(' ').trim();
-          setLiveTranscript(preview);
-          if (preview) _resetSilenceTimer();
-          const totalWords = preview.split(/\s+/).filter(Boolean).length;
-          if (totalWords >= MIN_WORDS_TO_INTERRUPT) coach.stopTts();
-        };
-
-        recognition.onspeechend = () => {
-          if (cancelled) return;
-          if (silenceTimerRef.current) clearTimeout(silenceTimerRef.current);
-          if (coach.isTtsPlayingRef.current) {
-            transcriptPartsRef.current = [];
-            processedResultIndexRef.current = 0;
-            setLiveTranscript('');
-            setIsUserSpeaking(false);
-            return;
-          }
-          _sendAndClearTranscript();
-        };
-
-        recognition.onend = () => {
-          if (cancelled) return;
-          setIsUserSpeaking(false);
-          transcriptPartsRef.current = [];
-          setLiveTranscript('');
-          if (speechRecognitionRef.current === recognition) {
-            try {
-              recognition.start();
-            } catch {
-              speechRecognitionRef.current = null;
-            }
-          }
-        };
-
-        recognition.onerror = (event: any) => {
-          if (event.error === 'no-speech' || event.error === 'aborted') return;
-          console.warn('SpeechRecognition error:', event.error);
-        };
-
-        speechRecognitionRef.current = recognition;
-        recognition.start();
-      } catch (err) {
-        console.warn('Mic access failed:', err);
-      }
-    };
-
-    init();
-    return () => {
-      cancelled = true;
-      coach.stopTts();
-      if (silenceTimerRef.current) clearTimeout(silenceTimerRef.current);
-      if (speechRecognitionRef.current) {
-        try {
-          speechRecognitionRef.current.stop();
-        } catch {
-          // ignore
-        }
-        speechRecognitionRef.current = null;
-      }
-      if (streamRef.current) {
-        streamRef.current.getTracks().forEach((t) => t.stop());
-        streamRef.current = null;
-      }
-    };
-  }, [coach.session, coach.isMuted, coach.stopTts, coach.sendMessage]);
-
-  return (
-    <div className={styles.coaching}>
-      {/* Context Tabs */}
-      <div className={styles.contextBar}>
-        <div className={styles.contextTabs}>
-          {coach.contexts.map(ctx => (
-            <button
-              key={ctx.id}
-              className={`${styles.contextTab} ${coach.selectedContextId === ctx.id ? styles.contextTabActive : ''}`}
-              onClick={() => coach.selectContext(ctx.id)}
-              title={ctx.title}
-            >
-              <span className={styles.contextTabIcon}>{_categoryIcon(ctx.category)}</span>
-              <span className={styles.contextTabLabel}>{ctx.title}</span>
-            </button>
-          ))}
-          <button
-            className={styles.contextTabNew}
-            onClick={() => setShowNewContext(!showNewContext)}
-            title="Neues Thema"
-          >
-            +
-          </button>
-        </div>
-      </div>
-
-      {/* New Context Form */}
-      {showNewContext && (
-        <div className={styles.newContextForm}>
-          <input
-            className={styles.newContextInput}
-            placeholder="Thema / Titel..."
-            value={newTitle}
-            onChange={e => setNewTitle(e.target.value)}
-            onKeyDown={e => e.key === 'Enter' && handleCreateContext()}
-            autoFocus
-          />
-          <input
-            className={styles.newContextInput}
-            placeholder="Beschreibung (optional)"
-            value={newDescription}
-            onChange={e => setNewDescription(e.target.value)}
-          />
-          <select
-            className={styles.newContextSelect}
-            value={newCategory}
-            onChange={e => setNewCategory(e.target.value)}
-          >
-            <option value="custom">Individuell</option>
-            <option value="leadership">Führung</option>
-            <option value="conflict">Konflikt</option>
-            <option value="negotiation">Verhandlung</option>
-            <option value="presentation">Präsentation</option>
-            <option value="feedback">Feedback</option>
-            <option value="delegation">Delegation</option>
-            <option value="changeManagement">Change Management</option>
-          </select>
-          <div className={styles.newContextActions}>
-            <button className={styles.btnPrimary} onClick={handleCreateContext} disabled={!newTitle.trim() || !!coach.actionLoading}>
-              {coach.actionLoading === 'creating' ? 'Wird erstellt...' : 'Erstellen'}
-            </button>
-            <button className={styles.btnSecondary} onClick={() => setShowNewContext(false)}>
-              Abbrechen
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* No Context Selected */}
-      {!coach.selectedContextId && !showNewContext && (
-        <div className={styles.noContext}>
-          <h3>Willkommen beim Kommunikations-Coach</h3>
-          <p>Wähle ein bestehendes Thema oder erstelle ein neues, um zu beginnen.</p>
-          <button className={styles.btnPrimary} onClick={() => setShowNewContext(true)}>
-            Neues Thema erstellen
-          </button>
-        </div>
-      )}
-
-      {/* Chat Area */}
-      {coach.selectedContextId && (
-        <div className={styles.chatArea}>
-          {/* Session controls */}
-          {!coach.session && (
-            <div className={styles.sessionStart}>
-              <h3>{coach.selectedContext?.title}</h3>
-              <p>{coach.selectedContext?.description || 'Starte eine neue Coaching-Session zu diesem Thema.'}</p>
-
-              {personas.length > 0 && (
-                <div className={styles.personaSelector}>
-                  <label className={styles.personaLabel}>Gesprächspartner wählen:</label>
-                  <div className={styles.personaGrid}>
-                    {personas.map(p => (
-                      <button
-                        key={p.id}
-                        className={`${styles.personaChip} ${selectedPersonaId === p.id ? styles.personaChipActive : ''}`}
-                        onClick={() => setSelectedPersonaId(selectedPersonaId === p.id ? undefined : p.id)}
-                        title={p.description}
-                      >
-                        <span className={styles.personaGender}>
-                          {p.gender === 'f' ? '\u2640' : p.gender === 'm' ? '\u2642' : '\u25CB'}
-                        </span>
-                        <span className={styles.personaName}>{p.label}</span>
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              <button
-                className={styles.btnPrimary}
-                onClick={() => coach.startSession(selectedPersonaId)}
-                disabled={!!coach.actionLoading}
-              >
-                {coach.actionLoading === 'starting'
-                  ? 'Wird gestartet...'
-                  : selectedPersonaId && personas.find(p => p.id === selectedPersonaId)
-                    ? `Session starten mit ${personas.find(p => p.id === selectedPersonaId)!.label}`
-                    : 'Session starten'}
-              </button>
-            </div>
-          )}
-
-          {/* Messages */}
-          {coach.session && (
-            <>
-              <div className={styles.sessionHeader}>
-                <span className={styles.sessionLabel}>
-                  Session aktiv - {coach.selectedContext?.title}
-                </span>
-                <div className={styles.sessionActions}>
-                  {isTtsPlaying && (
-                    <button className={styles.btnSmallDanger} onClick={coach.stopTts}>
-                      Stop
-                    </button>
-                  )}
-                  {coach.wasInterrupted && !isTtsPlaying && (
-                    <button className={styles.btnSmall} onClick={coach.resumeTts}>
-                      Weitersprechen
-                    </button>
-                  )}
-                  <button
-                    className={`${styles.btnSmall} ${coach.isMuted ? styles.mutedActive : ''}`}
-                    onClick={() => coach.setMuted(!coach.isMuted)}
-                    title={coach.isMuted ? 'Stummschaltung aufheben' : 'Stummschalten'}
-                  >
-                    {coach.isMuted ? '\u{1F507}' : '\u{1F3A4}'} {coach.isMuted ? 'Stumm' : 'Ton an'}
-                  </button>
-                  <button
-                    className={styles.btnSmall}
-                    onClick={coach.completeSession}
-                    disabled={!!coach.actionLoading}
-                  >
-                    {coach.actionLoading === 'completing' ? 'Wird abgeschlossen...' : 'Abschliessen'}
-                  </button>
-                  <button
-                    className={styles.btnSmallDanger}
-                    onClick={coach.cancelSession}
-                    disabled={!!coach.actionLoading}
-                  >
-                    {coach.actionLoading === 'cancelling' ? 'Wird abgebrochen...' : 'Abbrechen'}
-                  </button>
-                </div>
-              </div>
-
-              <AutoScroll scrollDependency={coach.messages.length + (coach.isStreaming ? 1 : 0) + liveTranscript.length}>
-                <div className={styles.messages}>
-                  {coach.messages.map(msg => (
-                    <div
-                      key={msg.id}
-                      className={`${styles.message} ${msg.role === 'user' ? styles.messageUser : styles.messageAssistant}`}
-                    >
-                      <div className={styles.messageBubble}>
-                        <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                          {msg.content}
-                        </ReactMarkdown>
-                      </div>
-                      <div className={styles.messageTime}>
-                        {msg.createdAt ? new Date(msg.createdAt).toLocaleTimeString('de-CH', { hour: '2-digit', minute: '2-digit' }) : ''}
-                      </div>
-                    </div>
-                  ))}
-                  {liveTranscript && (
-                    <div className={`${styles.message} ${styles.messageUser}`}>
-                      <div className={`${styles.messageBubble} ${styles.messageLive}`}>
-                        {liveTranscript}
-                      </div>
-                    </div>
-                  )}
-                  {coach.isStreaming && (
-                    <div className={`${styles.message} ${styles.messageAssistant}`}>
-                      <div className={styles.messageBubble}>
-                        {coach.streamingMessage ? (
-                          <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                            {coach.streamingMessage}
-                          </ReactMarkdown>
-                        ) : (
-                          <div className={styles.typing}>
-                            {coach.streamingStatus || 'Coach denkt nach'}
-                            <span className={styles.typingDots}>...</span>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </AutoScroll>
-
-              {/* Input: Chat und Voice parallel (CONCEPT: Voice first, always with text fallback) */}
-              <div className={styles.inputArea}>
-                <div className={styles.voiceStatus}>
-                  <span className={`${styles.voiceIndicator} ${isListening && !coach.isMuted ? styles.voiceActive : ''}`}>
-                    {coach.isMuted
-                      ? 'Stumm – Mikrofon aus'
-                      : coach.isStreaming
-                        ? (coach.streamingStatus || 'Coach antwortet...')
-                        : isUserSpeaking
-                          ? 'Spricht...'
-                          : isListening
-                            ? 'Mikrofon an – bitte sprechen'
-                            : 'Mikrofon wird gestartet...'}
-                  </span>
-                </div>
-                <div className={styles.textInputRow}>
-                  <textarea
-                    ref={inputRef}
-                    className={styles.textInput}
-                    placeholder="Nachricht eingeben..."
-                    value={coach.inputValue}
-                    onChange={e => coach.setInputValue(e.target.value)}
-                    onKeyDown={handleKeyDown}
-                    rows={1}
-                    disabled={coach.isStreaming}
-                  />
-                  <button
-                    className={styles.sendBtn}
-                    onClick={handleSend}
-                    disabled={!coach.inputValue.trim() || coach.isStreaming}
-                  >
-                    Senden
-                  </button>
-                </div>
-              </div>
-            </>
-          )}
-
-          {/* Error */}
-          {coach.error && (
-            <div className={styles.errorBanner}>{coach.error}</div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-function _categoryIcon(category: string): string {
-  const icons: Record<string, string> = {
-    leadership: 'L', conflict: 'K', negotiation: 'V',
-    presentation: 'P', feedback: 'F', delegation: 'D',
-    changeManagement: 'C', custom: '*',
-  };
-  return icons[category] || '*';
-}
-
-export default CommcoachCoachingView;
diff --git a/src/pages/views/commcoach/CommcoachDossierView.tsx b/src/pages/views/commcoach/CommcoachDossierView.tsx
index d0f12bd..1827b55 100644
--- a/src/pages/views/commcoach/CommcoachDossierView.tsx
+++ b/src/pages/views/commcoach/CommcoachDossierView.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { useCommcoach } from '../../../hooks/useCommcoach';
+import { useCommcoach, type TtsEvent } from '../../../hooks/useCommcoach';
 import { useApiRequest } from '../../../hooks/useApi';
 import { useInstanceId } from '../../../hooks/useCurrentInstance';
 import api from '../../../api';
@@ -23,6 +23,17 @@ import styles from './CommcoachDossierView.module.css';
 
 type TabKey = 'coaching' | 'tasks' | 'sessions' | 'scores' | 'documents';
 
+/**
+ * Voice State Machine
+ *
+ * idle        – no session active, everything off
+ * listening   – mic on, recognition active, TTS off
+ * botSpeaking – TTS playing, mic/recognition suspended
+ * interrupted – TTS paused (resumable), mic on, recognition active
+ * muted       – mic off, TTS continues if playing
+ */
+type VoiceState = 'idle' | 'listening' | 'botSpeaking' | 'interrupted' | 'muted';
+
 export const CommcoachDossierView: React.FC = () => {
   const coach = useCommcoach();
   const { request } = useApiRequest();
@@ -47,10 +58,11 @@ export const CommcoachDossierView: React.FC = () => {
   const transcriptPartsRef = useRef<string[]>([]);
   const processedResultIndexRef = useRef(0);
   const silenceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [isListening, setIsListening] = useState(false);
-  const [isUserSpeaking, setIsUserSpeaking] = useState(false);
   const [liveTranscript, setLiveTranscript] = useState('');
-  const [isTtsPlaying, setIsTtsPlaying] = useState(false);
+
+  // Voice State Machine
+  const [voiceState, setVoiceState] = useState<VoiceState>('idle');
+  const voiceStateRef = useRef<VoiceState>('idle');
 
   // #region agent log
   const debugLogsRef = useRef<string[]>([]);
@@ -66,6 +78,32 @@ export const CommcoachDossierView: React.FC = () => {
   useEffect(() => { (window as any).__dlog = _dlog; return () => { delete (window as any).__dlog; }; }, [_dlog]);
   // #endregion
 
+  const _transitionVoice = useCallback((next: VoiceState) => {
+    const prev = voiceStateRef.current;
+    if (prev === next) return;
+    _dlog('VOICE', `${prev} -> ${next}`);
+    voiceStateRef.current = next;
+    setVoiceState(next);
+  }, [_dlog]);
+
+  // Subscribe to TTS events from the hook
+  useEffect(() => {
+    coach.onTtsEventRef.current = (event: TtsEvent) => {
+      const cur = voiceStateRef.current;
+      if (event === 'playing') {
+        if (cur !== 'muted') _transitionVoice('botSpeaking');
+      } else if (event === 'ended') {
+        if (cur === 'botSpeaking') _transitionVoice('listening');
+        if (cur === 'interrupted') _transitionVoice('listening');
+      } else if (event === 'paused') {
+        if (cur === 'botSpeaking') _transitionVoice('interrupted');
+      } else if (event === 'error') {
+        if (cur === 'botSpeaking') _transitionVoice('listening');
+      }
+    };
+    return () => { coach.onTtsEventRef.current = null; };
+  }, [coach.onTtsEventRef, _transitionVoice]);
+
   // Auto-select first context
   useEffect(() => {
     if (!coach.selectedContextId && coach.contexts.length > 0) {
@@ -101,59 +139,64 @@ export const CommcoachDossierView: React.FC = () => {
       .catch(() => {});
   }, [instanceId, request]);
 
-  // TTS playing state sync
+  // Transition to idle when session ends or tab changes away
   useEffect(() => {
-    if (!coach.session) return;
-    const interval = setInterval(() => {
-      setIsTtsPlaying(coach.isTtsPlayingRef.current);
-    }, 200);
-    return () => clearInterval(interval);
-  }, [coach.session, coach.isTtsPlayingRef]);
+    if (activeTab !== 'coaching' || !coach.session) {
+      _transitionVoice('idle');
+    } else if (voiceStateRef.current === 'idle') {
+      _transitionVoice('listening');
+    }
+  }, [activeTab, coach.session?.id, _transitionVoice]);
 
-  // Speech Recognition (only when coaching tab active + session running + not muted)
+  // Hardware control: start/stop recognition + mic based on voiceState
   useEffect(() => {
-    if (activeTab !== 'coaching' || !coach.session || coach.isMuted) {
+    const micShouldBeOn = voiceState === 'listening' || voiceState === 'interrupted';
+    const micShouldBeOff = voiceState === 'idle' || voiceState === 'botSpeaking' || voiceState === 'muted';
+
+    if (micShouldBeOff) {
       if (speechRecognitionRef.current) {
         try { speechRecognitionRef.current.stop(); } catch { /* ignore */ }
-        speechRecognitionRef.current = null;
       }
-      if (streamRef.current) {
+      if (voiceState === 'idle' && streamRef.current) {
         streamRef.current.getTracks().forEach(t => t.stop());
         streamRef.current = null;
+        speechRecognitionRef.current = null;
       }
-      setIsListening(false);
-      setIsUserSpeaking(false);
       return;
     }
 
+    if (!micShouldBeOn) return;
+
     const SpeechRecognitionApi = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
     if (!SpeechRecognitionApi) return;
 
+    if (speechRecognitionRef.current) {
+      try { speechRecognitionRef.current.start(); } catch { /* already running */ }
+      return;
+    }
+
     let cancelled = false;
+    const SILENCE_TIMEOUT_MS = 1500;
     const MIN_WORDS_TO_INTERRUPT = 4;
 
     const init = async () => {
       try {
-        const stream = await navigator.mediaDevices.getUserMedia({
-          audio: { echoCancellation: true, noiseSuppression: true },
-        });
-        if (cancelled) { stream.getTracks().forEach(t => t.stop()); return; }
-        streamRef.current = stream;
-        setIsListening(true);
+        if (!streamRef.current) {
+          const stream = await navigator.mediaDevices.getUserMedia({
+            audio: { echoCancellation: true, noiseSuppression: true },
+          });
+          if (cancelled) { stream.getTracks().forEach(t => t.stop()); return; }
+          streamRef.current = stream;
+        }
 
         const recognition = new SpeechRecognitionApi();
         recognition.continuous = true;
         recognition.interimResults = true;
         recognition.lang = 'de-DE';
 
-        const SILENCE_TIMEOUT_MS = 1500;
-
         const _sendAndClearTranscript = () => {
           const fullTranscript = transcriptPartsRef.current.join(' ').trim();
-          // #region agent log
-          const wc = fullTranscript.split(/\s+/).filter(Boolean).length;
-          _dlog('SEND', `words=${wc} send=${wc>=MIN_WORDS_TO_INTERRUPT} "${fullTranscript.substring(0,60)}"`);
-          // #endregion
+          _dlog('SEND', `words=${fullTranscript.split(/\s+/).filter(Boolean).length} "${fullTranscript.substring(0,60)}"`);
           if (fullTranscript) {
             const wordCount = fullTranscript.split(/\s+/).filter(Boolean).length;
             if (wordCount >= MIN_WORDS_TO_INTERRUPT) coach.sendMessage(fullTranscript);
@@ -161,7 +204,6 @@ export const CommcoachDossierView: React.FC = () => {
           transcriptPartsRef.current = [];
           processedResultIndexRef.current = 0;
           setLiveTranscript('');
-          setIsUserSpeaking(false);
         };
 
         const _resetSilenceTimer = () => {
@@ -173,11 +215,7 @@ export const CommcoachDossierView: React.FC = () => {
         };
 
         recognition.onspeechstart = () => {
-          // #region agent log
-          _dlog('SPCH-START', `tts=${coach.isTtsPlayingRef.current}`);
-          // #endregion
-          if (cancelled || coach.isTtsPlayingRef.current) return;
-          setIsUserSpeaking(true);
+          if (cancelled || voiceStateRef.current === 'botSpeaking') return;
           transcriptPartsRef.current = [];
           processedResultIndexRef.current = 0;
           setLiveTranscript('');
@@ -186,60 +224,50 @@ export const CommcoachDossierView: React.FC = () => {
 
         recognition.onresult = (event: SpeechRecognitionEvent) => {
           if (cancelled) return;
+          const isBotSpeaking = voiceStateRef.current === 'botSpeaking';
           const interimParts: string[] = [];
           for (let i = processedResultIndexRef.current; i < event.results.length; i++) {
             const r = event.results[i];
             if (r.isFinal) {
               const text = r[0].transcript.trim();
-              if (text) transcriptPartsRef.current.push(text);
+              if (text && !isBotSpeaking) transcriptPartsRef.current.push(text);
               processedResultIndexRef.current = i + 1;
             } else {
-              if (coach.isTtsPlayingRef.current) continue;
+              if (isBotSpeaking) continue;
               const text = r[0].transcript.trim();
               if (text) interimParts.push(text);
             }
           }
+          if (isBotSpeaking) return;
           const currentInterim = interimParts.join(' ');
           const preview = [...transcriptPartsRef.current, currentInterim].join(' ').trim();
           setLiveTranscript(preview);
           if (preview) _resetSilenceTimer();
-          const finalizedWords = transcriptPartsRef.current.join(' ').split(/\s+/).filter(Boolean).length;
-          if (coach.isTtsPlayingRef.current && finalizedWords >= MIN_WORDS_TO_INTERRUPT) {
-            coach.stopTts();
-          }
         };
 
         recognition.onspeechend = () => {
-          // #region agent log
-          _dlog('SPCH-END', `tts=${coach.isTtsPlayingRef.current} parts=${transcriptPartsRef.current.length}`);
-          // #endregion
           if (cancelled) return;
           if (silenceTimerRef.current) clearTimeout(silenceTimerRef.current);
-          if (coach.isTtsPlayingRef.current) {
+          if (voiceStateRef.current === 'botSpeaking') {
             transcriptPartsRef.current = [];
             processedResultIndexRef.current = 0;
             setLiveTranscript('');
-            setIsUserSpeaking(false);
             return;
           }
           _sendAndClearTranscript();
         };
 
         recognition.onend = () => {
-          // #region agent log
-          _dlog('REC-END', `cancelled=${cancelled} sameRef=${speechRecognitionRef.current===recognition} tts=${coach.isTtsPlayingRef.current}`);
-          // #endregion
+          _dlog('REC-END', `state=${voiceStateRef.current}`);
           if (cancelled) return;
-          if (coach.isTtsPlayingRef.current) return;
+          if (voiceStateRef.current === 'botSpeaking' || voiceStateRef.current === 'muted' || voiceStateRef.current === 'idle') return;
           if (speechRecognitionRef.current === recognition) {
             try { recognition.start(); } catch { speechRecognitionRef.current = null; }
           }
         };
 
         recognition.onerror = (event: any) => {
-          // #region agent log
           _dlog('REC-ERR', event.error);
-          // #endregion
           if (event.error === 'no-speech' || event.error === 'aborted') return;
           console.warn('SpeechRecognition error:', event.error);
         };
@@ -252,12 +280,12 @@ export const CommcoachDossierView: React.FC = () => {
     };
 
     init();
+    return () => { cancelled = true; };
+  }, [voiceState, _dlog, coach]);
+
+  // Cleanup on unmount
+  useEffect(() => {
     return () => {
-      // #region agent log
-      _dlog('CLEANUP', `tab=${activeTab} sess=${coach.session?.id} muted=${coach.isMuted}`);
-      // #endregion
-      cancelled = true;
-      coach.stopTts();
       if (silenceTimerRef.current) clearTimeout(silenceTimerRef.current);
       if (speechRecognitionRef.current) {
         try { speechRecognitionRef.current.stop(); } catch { /* ignore */ }
@@ -268,34 +296,27 @@ export const CommcoachDossierView: React.FC = () => {
         streamRef.current = null;
       }
     };
-  }, [activeTab, coach.session?.id, coach.isMuted]);
+  }, []);
 
-  // On mobile, SpeechRecognition and Audio output conflict for the audio session.
-  // Pause recognition while TTS plays, resume when it stops.
-  useEffect(() => {
-    if (!speechRecognitionRef.current) return;
-    if (isTtsPlaying) {
-      // #region agent log
-      _dlog('REC-SUSPEND', 'tts started, stopping recognition');
-      // #endregion
-      try { speechRecognitionRef.current.stop(); } catch { /* ignore */ }
-    } else {
-      // #region agent log
-      _dlog('REC-RESUME', 'tts ended, restarting recognition');
-      // #endregion
-      try { speechRecognitionRef.current.start(); } catch { /* ignore */ }
+  // Voice actions
+  const handleStopTts = useCallback(() => {
+    coach.stopTts();
+  }, [coach]);
+
+  const handleResumeTts = useCallback(() => {
+    coach.resumeTts();
+  }, [coach]);
+
+  const handleToggleMute = useCallback(() => {
+    const cur = voiceStateRef.current;
+    if (cur === 'muted') {
+      _transitionVoice('listening');
+    } else if (cur === 'listening' || cur === 'interrupted') {
+      _transitionVoice('muted');
+    } else if (cur === 'botSpeaking') {
+      _transitionVoice('muted');
     }
-  }, [isTtsPlaying, _dlog]);
-
-  // Reset mute when session ends
-  useEffect(() => {
-    if (!coach.session) coach.setMuted(false);
-  }, [coach.session]);
-
-  // Focus input on session start
-  useEffect(() => {
-    if (coach.session && inputRef.current) inputRef.current.focus();
-  }, [coach.session]);
+  }, [_transitionVoice]);
 
   const handleSend = useCallback(async () => {
     if (!coach.inputValue.trim() || coach.isStreaming) return;
@@ -512,18 +533,18 @@ export const CommcoachDossierView: React.FC = () => {
                 <div className={styles.sessionHeader}>
                   <span className={styles.sessionLabel}>Session aktiv</span>
                   <div className={styles.sessionActions}>
-                    {isTtsPlaying && (
-                      <button className={styles.btnSmallDanger} onClick={coach.stopTts}>Stop</button>
+                    {voiceState === 'botSpeaking' && (
+                      <button className={styles.btnSmallDanger} onClick={handleStopTts}>Stop</button>
                     )}
-                    {coach.wasInterrupted && !isTtsPlaying && (
-                      <button className={styles.btnSmall} onClick={coach.resumeTts}>Weitersprechen</button>
+                    {voiceState === 'interrupted' && coach.hasAudioToResume() && (
+                      <button className={styles.btnSmall} onClick={handleResumeTts}>Weitersprechen</button>
                     )}
                     <button
-                      className={`${styles.btnSmall} ${coach.isMuted ? styles.mutedActive : ''}`}
-                      onClick={() => coach.setMuted(!coach.isMuted)}
-                      title={coach.isMuted ? 'Stummschaltung aufheben' : 'Stummschalten'}
+                      className={`${styles.btnSmall} ${voiceState === 'muted' ? styles.mutedActive : ''}`}
+                      onClick={handleToggleMute}
+                      title={voiceState === 'muted' ? 'Stummschaltung aufheben' : 'Stummschalten'}
                     >
-                      {coach.isMuted ? '\u{1F507} Stumm' : '\u{1F3A4} Ton an'}
+                      {voiceState === 'muted' ? '\u{1F507} Stumm' : '\u{1F3A4} Ton an'}
                     </button>
                     <button className={styles.btnSmall} onClick={coach.completeSession} disabled={!!coach.actionLoading}>
                       {coach.actionLoading === 'completing' ? 'Wird abgeschlossen...' : 'Abschliessen'}
@@ -569,16 +590,18 @@ export const CommcoachDossierView: React.FC = () => {
                 {/* Input Area */}
                 <div className={styles.inputArea}>
                   <div className={styles.voiceStatus}>
-                    <span className={`${styles.voiceIndicator} ${isListening && !coach.isMuted ? styles.voiceActive : ''}`}>
-                      {coach.isMuted
+                    <span className={`${styles.voiceIndicator} ${voiceState === 'listening' ? styles.voiceActive : ''}`}>
+                      {voiceState === 'muted'
                         ? 'Stumm – Mikrofon aus'
-                        : coach.isStreaming
-                          ? (coach.streamingStatus || 'Coach antwortet...')
-                          : isUserSpeaking
-                            ? 'Spricht...'
-                            : isListening
-                              ? 'Mikrofon an – bitte sprechen'
-                              : 'Mikrofon wird gestartet...'}
+                        : voiceState === 'botSpeaking'
+                          ? (coach.streamingStatus || 'Coach spricht...')
+                          : coach.isStreaming
+                            ? (coach.streamingStatus || 'Coach denkt nach...')
+                            : voiceState === 'interrupted'
+                              ? 'Unterbrochen – Mikrofon an'
+                              : voiceState === 'listening'
+                                ? (liveTranscript ? 'Spricht...' : 'Mikrofon an – bitte sprechen')
+                                : 'Mikrofon wird gestartet...'}
                     </span>
                   </div>
                   <div className={styles.textInputRow}>