From 1d7c28206691d2b4a9ccc468ecddd6d81265f663 Mon Sep 17 00:00:00 2001
From: Xin Wang <wx44wx@XindeMac-mini.local>
Date: Mon, 9 Feb 2026 16:55:40 +0800
Subject: [PATCH] Improve audio debug drawer

---
 web/pages/Assistants.tsx | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/web/pages/Assistants.tsx b/web/pages/Assistants.tsx
index 5956363..42690dc 100644
--- a/web/pages/Assistants.tsx
+++ b/web/pages/Assistants.tsx
@@ -2013,10 +2013,10 @@ export const DebugDrawer: React.FC<{
               ) : (
                 <div className="flex-1 flex flex-col min-h-0 space-y-2">
                   {mode === 'voice' ? (
-                    <div className="flex flex-col h-full min-h-0 animate-in fade-in">
-                      <div className="mb-2">
+                    <div className="h-[68vh] min-h-[420px] max-h-[68vh] w-full flex flex-col min-h-0 overflow-hidden animate-in fade-in">
+                      <div className="mb-2 flex items-center gap-2 shrink-0">
                         <select
-                          className="w-full text-xs bg-white/5 border border-white/10 rounded px-2 py-1 text-foreground"
+                          className="flex-1 text-xs bg-white/5 border border-white/10 rounded px-2 py-1 text-foreground"
                           value={selectedMic}
                           onChange={(e) => setSelectedMic(e.target.value)}
                         >
@@ -2024,15 +2024,12 @@ export const DebugDrawer: React.FC<{
                             <option key={d.deviceId} value={d.deviceId}>{d.label || 'Mic'}</option>
                           ))}
                         </select>
-                      </div>
-                      <div className="h-1/3 min-h-[150px] shrink-0 border border-white/5 rounded-md bg-black/20 flex flex-col items-center justify-center text-muted-foreground space-y-4 mb-2 relative overflow-hidden">
-                        <div className="h-24 w-24 rounded-full bg-primary/10 flex items-center justify-center animate-pulse relative z-10">
-                          <Mic className="h-10 w-10 text-primary" />
+                        <div className="px-2 py-1 rounded border border-white/10 bg-black/20 text-[11px] text-muted-foreground inline-flex items-center gap-1.5">
+                          <span className="h-1.5 w-1.5 rounded-full bg-green-400 animate-pulse" />
+                          通话中
                         </div>
-                        <p className="text-sm relative z-10">通话中...</p>
                       </div>
-                      <h4 className="text-xs font-medium text-muted-foreground px-1 mb-1 uppercase tracking-tight shrink-0">转写日志</h4>
-                      <TranscriptionLog scrollRef={scrollRef} messages={messages} isLoading={isLoading} className="flex-1 min-h-0 overflow-y-auto" />
+                      <TranscriptionLog scrollRef={scrollRef} messages={messages} isLoading={isLoading} className="flex-1 min-h-0 h-full" />
                     </div>
                   ) : (
                     <div className="flex flex-col h-full min-h-0 space-y-2 animate-in fade-in">
@@ -2055,7 +2052,7 @@ export const DebugDrawer: React.FC<{
                     </div>
                   )}
                   <Button variant="destructive" size="sm" className="w-full h-10 font-bold" onClick={handleHangup}>
-                    <PhoneOff className="mr-2 h-4 w-4" /> 挂断通话
+                    <PhoneOff className="mr-2 h-4 w-4" /> 结束通话
                   </Button>
                 </div>
               )}