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/scenario/ScenariosPage.tsx

@@ -5,7 +5,16 @@ import { Play, Plus, Trash2, Download, ClipboardList } from 'lucide-react';
 import { parse as yamlParse } from 'yaml';
 import { scenarios } from '../../api';
 import type { Scenario } from '../../api';
-import { Breadcrumbs, Button, Table, type TableColumn, Timestamp, UuidBadge, useToast } from '../../ui';
+import {
+  Breadcrumbs,
+  Button,
+  Modal,
+  Table,
+  type TableColumn,
+  Timestamp,
+  UuidBadge,
+  useToast,
+} from '../../ui';
 import styles from '../Page.module.css';
 
 export function ScenariosPage() {
@@ -15,6 +24,8 @@ export function ScenariosPage() {
   const [items, setItems] = useState<Scenario[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState(false);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -40,10 +51,17 @@ export function ScenariosPage() {
     }
   };
 
-  const handleDelete = async (id: string) => {
-    await scenarios.remove(id);
-    setLoading(true);
-    load();
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    setDeleting(true);
+    try {
+      await scenarios.remove(deleteId);
+      setLoading(true);
+      load();
+      setDeleteId(null);
+    } finally {
+      setDeleting(false);
+    }
   };
 
   const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -83,7 +101,10 @@ export function ScenariosPage() {
             variant="danger"
             size="sm"
             title={t('scenarios.action_delete')}
-            onClick={() => handleDelete(s.id)}
+            onClick={(e) => {
+              e.stopPropagation();
+              setDeleteId(s.id);
+            }}
           >
             <Trash2 size={14} />
           </Button>
@@ -124,6 +145,24 @@ export function ScenariosPage() {
         pageSizeOptions={[10, 25, 50]}
         onRowClick={(s) => navigate(`/scenarios/${s.id}`)}
       />
+
+      <Modal
+        open={deleteId != null}
+        title={t('scenarios.action_delete')}
+        onClose={() => !deleting && setDeleteId(null)}
+        footer={(
+          <>
+            <Button variant="secondary" onClick={() => setDeleteId(null)} disabled={deleting}>
+              Cancel
+            </Button>
+            <Button variant="danger" onClick={handleDelete} disabled={deleting}>
+              {t('scenarios.action_delete')}
+            </Button>
+          </>
+        )}
+      >
+        Are you sure you want to delete this scenario?
+      </Modal>
     </div>
   );
 }