feat(ui): require confirmation before delete actions

- add a reusable modal component and export it from the shared ui barrel

- gate all delete and remove flows behind explicit confirmation dialogs

- use a solid modal surface color token with fallback to avoid transparent body

client/src/pages/credential/CredentialDetailPage.tsx

@@ -11,6 +11,7 @@ import {
   Button,
   Card,
   DescriptionList,
+  Modal,
   Timestamp,
   UuidBadge,
 } from '../../ui';
@@ -23,6 +24,8 @@ export function CredentialDetailPage() {
   const [credential, setCredential] = useState<Credential | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
 
   useEffect(() => {
     if (!id) return;
@@ -35,8 +38,14 @@ export function CredentialDetailPage() {
 
   const handleDelete = async () => {
     if (!credential) return;
-    await credentials.remove(credential.id);
-    navigate('/credentials');
+    setDeleting(true);
+    try {
+      await credentials.remove(credential.id);
+      navigate('/credentials');
+    } finally {
+      setDeleting(false);
+      setConfirmDeleteOpen(false);
+    }
   };
 
   const handleExport = async () => {
@@ -74,7 +83,7 @@ export function CredentialDetailPage() {
               <Pencil size={14} />
               {t('credentials.action_edit')}
             </Button>
-            <Button variant="danger" size="sm" onClick={handleDelete}>
+            <Button variant="danger" size="sm" onClick={() => setConfirmDeleteOpen(true)}>
               <Trash2 size={14} />
               {t('credentials.action_delete')}
             </Button>
@@ -126,6 +135,24 @@ export function CredentialDetailPage() {
           )}
         </>
       )}
+
+      <Modal
+        open={confirmDeleteOpen}
+        title={t('credentials.action_delete')}
+        onClose={() => !deleting && setConfirmDeleteOpen(false)}
+        footer={(
+          <>
+            <Button variant="secondary" onClick={() => setConfirmDeleteOpen(false)} disabled={deleting}>
+              Cancel
+            </Button>
+            <Button variant="danger" onClick={handleDelete} disabled={deleting}>
+              {t('credentials.action_delete')}
+            </Button>
+          </>
+        )}
+      >
+        Are you sure you want to delete this credential?
+      </Modal>
     </div>
   );
 }