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/environment/EnvironmentsPage.tsx

@@ -12,6 +12,7 @@ import {
   Card,
   ContextMenu,
   DescriptionList,
+  Modal,
   Timestamp,
   UuidBadge,
 } from '../../ui';
@@ -120,6 +121,8 @@ export function EnvironmentsPage() {
   const [items, setItems] = useState<Environment[]>([]);
   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);
 
   const load = () => {
@@ -134,9 +137,20 @@ export function EnvironmentsPage() {
     load();
   }, []);
 
-  const handleDelete = async (id: string) => {
-    await environments.remove(id);
-    setItems((prev) => prev.filter((e) => e.id !== id));
+  const requestDelete = (id: string) => {
+    setDeleteId(id);
+  };
+
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    setDeleting(true);
+    try {
+      await environments.remove(deleteId);
+      setItems((prev) => prev.filter((e) => e.id !== deleteId));
+      setDeleteId(null);
+    } finally {
+      setDeleting(false);
+    }
   };
 
   const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -176,11 +190,29 @@ export function EnvironmentsPage() {
       ) : (
         <div className={styles.envGrid}>
           {items.map((env) => (
-            <EnvironmentCard key={env.id} env={env} onDelete={handleDelete} />
+            <EnvironmentCard key={env.id} env={env} onDelete={requestDelete} />
           ))}
           <AddEnvironmentCard />
         </div>
       )}
+
+      <Modal
+        open={deleteId != null}
+        title={t('environments.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('environments.action_delete')}
+            </Button>
+          </>
+        )}
+      >
+        Are you sure you want to delete this environment?
+      </Modal>
     </div>
   );
 }