From b94640ca81ed8cf22f560ba0e8cfc13e0e244a08 Mon Sep 17 00:00:00 2001
From: test <test@example.com>
Date: Tue, 17 Mar 2026 22:02:00 +0800
Subject: [PATCH] fix(modal): prevent accidental closure during execution

- Add disableBackdropClick prop to Modal component
- Prevent closing ExecutionReportDialog by clicking backdrop during execution
- Complements existing disableEscapeKey behavior for ongoing operations

This prevents users from accidentally interrupting long-running operations by clicking outside the dialog.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/renderer/src/components/ExecutionReportDialog.tsx | 1 +
 src/renderer/src/components/ui/Modal.tsx              | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/ExecutionReportDialog.tsx b/src/renderer/src/components/ExecutionReportDialog.tsx
index 99f77f4..2bfd3ef 100644
--- a/src/renderer/src/components/ExecutionReportDialog.tsx
+++ b/src/renderer/src/components/ExecutionReportDialog.tsx
@@ -138,6 +138,7 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
       triggerRef={triggerRef}
       isAlertDialog={isProgressing}
       disableEscapeKey={isProgressing}
+      disableBackdropClick={isProgressing}
       ariaDescribedBy={isProgressing ? 'execution-dialog-progress-desc' : undefined}
       initialFocusSelector={!isProgressing ? '.btn-report-close' : undefined}
     >
diff --git a/src/renderer/src/components/ui/Modal.tsx b/src/renderer/src/components/ui/Modal.tsx
index 39462e3..90a8cfd 100644
--- a/src/renderer/src/components/ui/Modal.tsx
+++ b/src/renderer/src/components/ui/Modal.tsx
@@ -28,6 +28,8 @@ interface ModalProps {
   isAlertDialog?: boolean
   /** Whether to disable escape key handling (e.g., during execution) */
   disableEscapeKey?: boolean
+  /** Whether to disable closing when clicking on backdrop (e.g., during execution) */
+  disableBackdropClick?: boolean
 }
 
 const sizeStyles: Record<string, string> = {
@@ -51,7 +53,8 @@ export function Modal({
   initialFocusSelector,
   ariaDescribedBy,
   isAlertDialog = false,
-  disableEscapeKey = false
+  disableEscapeKey = false,
+  disableBackdropClick = false
 }: ModalProps): React.JSX.Element | null {
   const dialogRef = useRef<HTMLDivElement>(null)
   const [generatedId] = useState(
@@ -87,7 +90,7 @@ export function Modal({
         {/* Backdrop */}
         <div
           className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
-          onClick={onClose}
+          onClick={disableBackdropClick ? undefined : onClose}
           aria-hidden="true"
         />