From db86d196a761c6f0f50801db3fd6c6b51905045b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Jul 2026 02:37:55 +0000
Subject: [PATCH 1/2] fix(web): keep credential setup modal open on backdrop
 click

An accidental click on the dimmed backdrop no longer discards
in-progress credential setup. Backdrop dismissal is now opt-in via a
new dismissOnBackdrop prop (default true) on the shared Modal, and the
credential modal opts out.
---
 web/src/components/Modal.tsx           | 5 +++--
 web/src/pages/vault/CredentialsTab.tsx | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/components/Modal.tsx b/web/src/components/Modal.tsx
index bc690750..1cb7abc6 100644
--- a/web/src/components/Modal.tsx
+++ b/web/src/components/Modal.tsx
@@ -7,9 +7,10 @@ interface ModalProps {
   description?: string;
   children: ReactNode;
   footer?: ReactNode;
+  dismissOnBackdrop?: boolean;
 }
 
-export default function Modal({ open, onClose, title, description, children, footer }: ModalProps) {
+export default function Modal({ open, onClose, title, description, children, footer, dismissOnBackdrop = true }: ModalProps) {
   useEffect(() => {
     if (!open) return;
     function handleKey(e: KeyboardEvent) {
@@ -24,7 +25,7 @@ export default function Modal({ open, onClose, title, description, children, foo
   return (
     <div
       className="fixed inset-0 z-50 flex items-center justify-center"
-      onClick={onClose}
+      onClick={dismissOnBackdrop ? onClose : undefined}
     >
       {/* Backdrop */}
       <div className="absolute inset-0 bg-black/40" />
diff --git a/web/src/pages/vault/CredentialsTab.tsx b/web/src/pages/vault/CredentialsTab.tsx
index 39b2884a..9873e963 100644
--- a/web/src/pages/vault/CredentialsTab.tsx
+++ b/web/src/pages/vault/CredentialsTab.tsx
@@ -634,7 +634,7 @@ function CredentialModal({ vaultName, editingKey, editingCred, onClose, onSaved
   }
 
   return (
-    <Modal open onClose={onClose}
+    <Modal open onClose={onClose} dismissOnBackdrop={false}
       title={isEdit ? "Edit Credential" : "Add Credential"}
       description={credType === "oauth" ? "Set up an OAuth 2.0 credential. The proxy automatically refreshes the access token." : "Credentials are injected into proxied requests. Values are encrypted at rest."}
       footer={<>

From 13556f2f446d72b829f211bb66fa3a706455e7d6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Jul 2026 02:43:09 +0000
Subject: [PATCH 2/2] fix(web): disable backdrop-click dismissal for all modals

Backdrop-click-to-close is now off by default across every modal
(Escape and the X/Cancel buttons still close them), broadening the
earlier credential-only fix per reviewer request.
---
 web/src/components/Modal.tsx           | 2 +-
 web/src/pages/vault/CredentialsTab.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/Modal.tsx b/web/src/components/Modal.tsx
index 1cb7abc6..391dc395 100644
--- a/web/src/components/Modal.tsx
+++ b/web/src/components/Modal.tsx
@@ -10,7 +10,7 @@ interface ModalProps {
   dismissOnBackdrop?: boolean;
 }
 
-export default function Modal({ open, onClose, title, description, children, footer, dismissOnBackdrop = true }: ModalProps) {
+export default function Modal({ open, onClose, title, description, children, footer, dismissOnBackdrop = false }: ModalProps) {
   useEffect(() => {
     if (!open) return;
     function handleKey(e: KeyboardEvent) {
diff --git a/web/src/pages/vault/CredentialsTab.tsx b/web/src/pages/vault/CredentialsTab.tsx
index 9873e963..39b2884a 100644
--- a/web/src/pages/vault/CredentialsTab.tsx
+++ b/web/src/pages/vault/CredentialsTab.tsx
@@ -634,7 +634,7 @@ function CredentialModal({ vaultName, editingKey, editingCred, onClose, onSaved
   }
 
   return (
-    <Modal open onClose={onClose} dismissOnBackdrop={false}
+    <Modal open onClose={onClose}
       title={isEdit ? "Edit Credential" : "Add Credential"}
       description={credType === "oauth" ? "Set up an OAuth 2.0 credential. The proxy automatically refreshes the access token." : "Credentials are injected into proxied requests. Values are encrypted at rest."}
       footer={<>