From 6348ae2af6b613e1eecb46701251024d1339a0c8 Mon Sep 17 00:00:00 2001
From: Eric Wang <wangx184@chinatelecom.cn>
Date: Wed, 5 Aug 2026 15:38:41 +0800
Subject: [PATCH] fix(frontend): blur debug drawer chat and video behind
 message dialog

Use a contained dialog portal scoped to the workspace and apply direct filter blur so show_message prompts dim transcript and video reliably.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../assistant-editor/debug-preview.tsx        | 32 +++++++++++++------
 .../src/components/client-message-dialog.tsx  | 10 ++++--
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/assistant-editor/debug-preview.tsx b/frontend/src/components/assistant-editor/debug-preview.tsx
index 25f3a22..1ed3f37 100644
--- a/frontend/src/components/assistant-editor/debug-preview.tsx
+++ b/frontend/src/components/assistant-editor/debug-preview.tsx
@@ -775,6 +775,7 @@ function DebugVoicePanel({
   const [inputMode, setInputMode] = useState<DebugInputMode>("mic");
   const [clientDialogContainer, setClientDialogContainer] =
     useState<HTMLDivElement | null>(null);
+  const [messageDialogOpen, setMessageDialogOpen] = useState(false);
   const inChatView = view === "chat" && (!SHOW_VOICE_VIZ || showTranscript);
   const idleOrFailed = status === "idle" || status === "failed";
   const showIdleHub =
@@ -812,17 +813,27 @@ function DebugVoicePanel({
   ]);
 
   return (
-    <div
-      ref={setClientDialogContainer}
-      className="relative isolate flex min-h-0 flex-1 flex-col overflow-hidden"
-    >
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
       {/* 后端 TTS 音频经 WebRTC 媒体流过来,挂这里播放 */}
       <audio ref={audioRef} autoPlay playsInline className="hidden" />
-      <ClientMessageDialog
-        preview={preview}
-        container={clientDialogContainer}
-        contained
-      />
+      <div
+        ref={setClientDialogContainer}
+        className="relative isolate flex min-h-0 flex-1 flex-col overflow-hidden"
+      >
+        <ClientMessageDialog
+          preview={preview}
+          container={clientDialogContainer}
+          contained
+          onOpenChange={setMessageDialogOpen}
+        />
+        <div
+          className={[
+            "flex min-h-0 flex-1 flex-col overflow-hidden transition-[filter] duration-200",
+            messageDialogOpen
+              ? "pointer-events-none blur-md brightness-[0.92]"
+              : "",
+          ].join(" ")}
+        >
       {vision && !showIdleHub ? (
         <DebugVisionWorkspace
           view={view}
@@ -953,6 +964,9 @@ function DebugVoicePanel({
         </div>
       )}
 
+        </div>
+      </div>
+
       <div className="shrink-0 border-t border-hairline bg-card p-3">
         <div className="flex items-center gap-2">
           <div
diff --git a/frontend/src/components/client-message-dialog.tsx b/frontend/src/components/client-message-dialog.tsx
index 447041f..c0e75eb 100644
--- a/frontend/src/components/client-message-dialog.tsx
+++ b/frontend/src/components/client-message-dialog.tsx
@@ -155,10 +155,12 @@ export function ClientMessageDialog({
   preview,
   container,
   contained = false,
+  onOpenChange,
 }: {
   preview: VoicePreview;
   container?: HTMLElement | null;
   contained?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) {
   const { registerClientTool, status } = preview;
   const [message, setMessage] = useState<MessageState | null>(null);
@@ -203,6 +205,10 @@ export function ClientMessageDialog({
     setMessage(null);
   }, [status]);
 
+  useEffect(() => {
+    onOpenChange?.(message !== null);
+  }, [message, onOpenChange]);
+
   return (
     <Dialog
       modal={!contained}
@@ -215,9 +221,7 @@ export function ClientMessageDialog({
         className="gap-5 sm:max-w-md"
         portalContainer={container}
         contained={contained}
-        overlayClassName={
-          contained ? "bg-black/20 backdrop-blur-md" : undefined
-        }
+        overlayClassName={contained ? "bg-black/25" : undefined}
         showCloseButton={message?.dismissible ?? true}
         onEscapeKeyDown={(event) => {
           if (!message?.dismissible) event.preventDefault();