Use styled modal dialogs for confirmations

static/js/instructions.js

@@ -6,7 +6,7 @@
 
 import { state } from './state.js';
 import { api } from './api.js';
-import { toast } from './app.js';
+import { confirmDialog, toast } from './app.js';
 
 // ── SVG icon helpers ──────────────────────────────────────────────────────
 
@@ -137,7 +137,14 @@ function renderPendingCard(item, index) {
   });
 
   deleteBtn.addEventListener('click', async () => {
-    if (!confirm('Delete this instruction?')) return;
+    const confirmed = await confirmDialog({
+      title: 'Delete instruction?',
+      message: 'This removes the pending instruction from the queue before any agent can consume it.',
+      confirmText: 'Delete Instruction',
+      cancelText: 'Keep Instruction',
+    });
+    if (!confirmed) return;
+
     deleteBtn.disabled = true;
     try {
       await api.deleteInstruction(item.id);
@@ -215,7 +222,14 @@ export function initInstructions() {
 
   // Clear history button
   clearHistoryBtn.addEventListener('click', async () => {
-    if (!confirm('Clear all consumed instruction history? This cannot be undone.')) return;
+    const confirmed = await confirmDialog({
+      title: 'Clear consumed history?',
+      message: 'This removes all consumed instructions from the history panel. This action cannot be undone.',
+      confirmText: 'Clear History',
+      cancelText: 'Keep History',
+    });
+    if (!confirmed) return;
+
     clearHistoryBtn.disabled = true;
     try {
       const res = await api.clearConsumed();