diff --git a/web/pages/Assistants.tsx b/web/pages/Assistants.tsx
index fc09b04..e116d17 100644
--- a/web/pages/Assistants.tsx
+++ b/web/pages/Assistants.tsx
@@ -2315,7 +2315,6 @@ const TranscriptionLog: React.FC<{
         </div>
       </div>
     ))}
-    {isLoading && <div className="text-xs text-muted-foreground ml-2 animate-pulse">Thinking...</div>}
   </div>
 );
 
@@ -2380,6 +2379,7 @@ export const DebugDrawer: React.FC<{
   const [inputText, setInputText] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [callStatus, setCallStatus] = useState<'idle' | 'calling' | 'active'>('idle');
+  const [agentState, setAgentState] = useState<'waiting' | 'listening' | 'thinking' | 'speaking'>('waiting');
   const [textPromptDialog, setTextPromptDialog] = useState<DebugTextPromptDialogState>({
     open: false,
     message: '',
@@ -2562,6 +2562,7 @@ export const DebugDrawer: React.FC<{
         clearResponseTracking();
         setMessages([]);
         setCallStatus('idle');
+        setAgentState('waiting');
       }
     } else {
         setMode('text');
@@ -2585,6 +2586,7 @@ export const DebugDrawer: React.FC<{
         setSettingsDrawerOpen(false);
         setIsSwapped(false);
         setCallStatus('idle');
+        setAgentState('waiting');
     }
   }, [isOpen, assistant, mode]);
 
@@ -3110,6 +3112,7 @@ export const DebugDrawer: React.FC<{
         console.error(e);
         stopVoiceCapture();
         setCallStatus('idle');
+        setAgentState('waiting');
         const err = e as Error & { __dynamicVariables?: boolean };
         if (err.__dynamicVariables) {
           setWsStatus('disconnected');
@@ -3135,6 +3138,7 @@ export const DebugDrawer: React.FC<{
     stopMedia();
     closeWs();
     setCallStatus('idle');
+    setAgentState('waiting');
     clearResponseTracking();
     setMessages([]);
     setTextPromptDialog({ open: false, message: '', promptType: 'text' });
@@ -3500,6 +3504,7 @@ export const DebugDrawer: React.FC<{
     setChoicePromptDialog({ open: false, question: '', options: [] });
     setTextSessionStarted(false);
     stopPlaybackImmediately();
+    setAgentState('waiting');
     if (isOpen) setWsStatus('disconnected');
   };
 
@@ -3580,6 +3585,12 @@ export const DebugDrawer: React.FC<{
         if (type === 'output.audio.start') {
           // New utterance audio starts: cancel old queued/playing audio to avoid overlap.
           stopPlaybackImmediately();
+          setAgentState('speaking');
+          return;
+        }
+
+        if (type === 'output.audio.end') {
+          setAgentState('waiting');
           return;
         }
 
@@ -3595,6 +3606,7 @@ export const DebugDrawer: React.FC<{
           assistantDraftIndexRef.current = null;
           setIsLoading(false);
           stopPlaybackImmediately();
+          setAgentState('waiting');
           return;
         }
 
@@ -3878,6 +3890,7 @@ export const DebugDrawer: React.FC<{
         if (type === 'session.started') {
           wsReadyRef.current = true;
           setWsStatus('ready');
+          setAgentState('waiting');
           pendingResolveRef.current?.();
           pendingResolveRef.current = null;
           pendingRejectRef.current = null;
@@ -3899,11 +3912,13 @@ export const DebugDrawer: React.FC<{
 
         if (type === 'input.speech_started') {
           setIsLoading(true);
+          setAgentState('listening');
           return;
         }
 
         if (type === 'input.speech_stopped') {
           setIsLoading(false);
+          setAgentState('thinking');
           return;
         }
 
@@ -4500,13 +4515,38 @@ export const DebugDrawer: React.FC<{
                             </div>
                         </div>
                         <div className="text-center z-10">
-                            <h3 className="text-xl font-bold text-white mb-2 tracking-tight">通话进行中</h3>
+                            <h3 className="text-xl font-bold text-white mb-2 tracking-tight">
+                              {agentState === 'listening' ? '正在倾听...' :
+                               agentState === 'thinking' ? '思考中...' :
+                               agentState === 'speaking' ? '正在回复...' :
+                               '待机中'}
+                            </h3>
                             <div className="flex items-center justify-center gap-2">
                                 <span className="relative flex h-2.5 w-2.5">
-                                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
-                                  <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500"></span>
+                                  <span className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${
+                                    agentState === 'listening' ? 'bg-blue-400' :
+                                    agentState === 'thinking' ? 'bg-yellow-400' :
+                                    agentState === 'speaking' ? 'bg-green-400' :
+                                    'bg-gray-400'
+                                  }`}></span>
+                                  <span className={`relative inline-flex rounded-full h-2.5 w-2.5 ${
+                                    agentState === 'listening' ? 'bg-blue-500' :
+                                    agentState === 'thinking' ? 'bg-yellow-500' :
+                                    agentState === 'speaking' ? 'bg-green-500' :
+                                    'bg-gray-500'
+                                  }`}></span>
                                 </span>
-                                <p className="text-sm font-medium text-green-400">已连接</p>
+                                <p className={`text-sm font-medium ${
+                                    agentState === 'listening' ? 'text-blue-400' :
+                                    agentState === 'thinking' ? 'text-yellow-400' :
+                                    agentState === 'speaking' ? 'text-green-400' :
+                                    'text-gray-400'
+                                }`}>
+                                  {agentState === 'listening' ? 'Listening' :
+                                   agentState === 'thinking' ? 'Thinking' :
+                                   agentState === 'speaking' ? 'Speaking' :
+                                   'Waiting'}
+                                </p>
                             </div>
                         </div>
                      </div>