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/session/SessionsPage.tsx

@@ -8,6 +8,7 @@ import {
   Badge,
   Breadcrumbs,
   Button,
+  Modal,
   Table,
   type TableColumn,
   Timestamp,
@@ -21,6 +22,8 @@ export function SessionsPage() {
   const [items, setItems] = useState<Session[]>([]);
   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 load = useCallback(() => {
     sessions
@@ -34,10 +37,17 @@ export function SessionsPage() {
     load();
   }, [load]);
 
-  const handleDelete = async (id: string) => {
-    await sessions.remove(id);
-    setLoading(true);
-    load();
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    setDeleting(true);
+    try {
+      await sessions.remove(deleteId);
+      setLoading(true);
+      load();
+      setDeleteId(null);
+    } finally {
+      setDeleting(false);
+    }
   };
 
   const columns: TableColumn<Session>[] = [
@@ -65,7 +75,10 @@ export function SessionsPage() {
           variant="danger"
           size="sm"
           title={t('sessions.action_delete')}
-          onClick={() => handleDelete(s.id)}
+          onClick={(e) => {
+            e.stopPropagation();
+            setDeleteId(s.id);
+          }}
         >
           <Trash2 size={14} />
         </Button>
@@ -88,6 +101,24 @@ export function SessionsPage() {
         pageSizeOptions={[10, 25, 50]}
         onRowClick={(s) => navigate(`/sessions/${s.id}`)}
       />
+
+      <Modal
+        open={deleteId != null}
+        title={t('sessions.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('sessions.action_delete')}
+            </Button>
+          </>
+        )}
+      >
+        Are you sure you want to delete this session?
+      </Modal>
     </div>
   );
 }