From 2f6840fe3e302ed5bda8f997a125f5c2e09dd1b4 Mon Sep 17 00:00:00 2001
From: MechaCat02 <MechaCat02@example.com>
Date: Thu, 28 May 2026 19:35:14 +0200
Subject: [PATCH] feat(dashboard): confirm modal for script delete

Replaces window.confirm + alert() with the in-dashboard ConfirmModal
(danger variant, name-retype). Body summarises what gets removed
(routes + execution logs) and embeds the API error inline rather than
firing a native alert.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/routes/scripts/[id]/+page.svelte      | 47 +++++++++++++++++--
 1 file changed, 43 insertions(+), 4 deletions(-)

diff --git a/dashboard/src/routes/scripts/[id]/+page.svelte b/dashboard/src/routes/scripts/[id]/+page.svelte
index 75f5897..934933a 100644
--- a/dashboard/src/routes/scripts/[id]/+page.svelte
+++ b/dashboard/src/routes/scripts/[id]/+page.svelte
@@ -24,6 +24,7 @@
 		pathKindMismatchWarning
 	} from '$lib/route-utils';
 	import CodeEditor from '$lib/CodeEditor.svelte';
+	import ConfirmModal from '$lib/ConfirmModal.svelte';
 	import { format as formatRhai } from '$lib/rhai';
 
 	/// Pretty-print a JSON string in place, leaving it untouched if the
@@ -375,16 +376,25 @@
 	}
 
 	// ---------------- deletion ----------------
+	let confirmingDelete = $state(false);
 	let deleting = $state(false);
-	async function remove() {
+	let deleteError = $state<string | null>(null);
+
+	function askDelete() {
+		deleteError = null;
+		confirmingDelete = true;
+	}
+
+	async function confirmDelete() {
 		if (!script) return;
-		if (!confirm(`Delete script "${script.name}"? This cannot be undone.`)) return;
 		deleting = true;
+		deleteError = null;
 		try {
 			await api.scripts.remove(id);
 			await goto(base + '/');
 		} catch (e) {
-			alert(e instanceof Error ? e.message : String(e));
+			deleteError = e instanceof Error ? e.message : String(e);
+		} finally {
 			deleting = false;
 		}
 	}
@@ -429,7 +439,7 @@
 				</p>
 			</div>
 			{#if canAdmin}
-				<button type="button" class="danger" onclick={remove} disabled={deleting}>
+				<button type="button" class="danger" onclick={askDelete} disabled={deleting}>
 					{deleting ? 'Deleting…' : 'Delete'}
 				</button>
 			{/if}
@@ -821,6 +831,35 @@
 				{/if}
 			</section>
 		{/if}
+
+		{#if confirmingDelete && script}
+			<ConfirmModal
+				title="Delete script “{script.name}”"
+				variant="danger"
+				confirmLabel="Delete script"
+				busyLabel="Deleting…"
+				confirmPhrase={script.name}
+				confirmPhrasePrompt="Type the script name to confirm:"
+				busy={deleting}
+				onConfirm={confirmDelete}
+				onCancel={() => (confirmingDelete = false)}
+			>
+				<p>
+					This will <strong>permanently delete</strong>
+					<strong>{script.name}</strong>, all its routes, and all its
+					execution logs. There is no undo.
+				</p>
+				{#if routes.length > 0}
+					<p class="muted">
+						{routes.length} route{routes.length === 1 ? '' : 's'} bound to
+						this script will be removed.
+					</p>
+				{/if}
+				{#if deleteError}
+					<p class="modal-error">{deleteError}</p>
+				{/if}
+			</ConfirmModal>
+		{/if}
 	{/if}
 </section>