fix: Mitigate Prompt modal race condition

Add some checks and await the handling of git prompts.

apps/desktop/src/lib/backend/prompt.ts

@@ -25,12 +25,40 @@ type FilterParams = {
 
 export type SystemPromptHandle = {
 	prompt: string;
-	respond: (response: string | null) => void;
+	respond: (response: string | null) => Promise<void>;
 };
 
 type PromptHandler = (prompt: SystemPrompt, signal: AbortSignal) => Promise<string | null>;
 type FilterEventEntry = [filter: FilterParams, handler: PromptHandler];
 
+/**
+ * Handle the abort signal for a prompt handler.
+ *
+ * This is required to be able to await the handling of a prompt.
+ */
+async function handleAbortSignal(
+	signal: AbortSignal,
+	promptStore: Writable<SystemPromptHandle | undefined>,
+	errorStore: Writable<any>
+): Promise<void> {
+	const signalHandler = new Promise<void>((resolve) => {
+		signal.addEventListener('abort', () => {
+			promptStore.set(undefined);
+			switch (signal.reason) {
+				case 'timeout':
+					errorStore.set('Timed out waiting for response');
+					break;
+				default:
+					errorStore.set(undefined);
+					break;
+			}
+			resolve();
+		});
+	});
+
+	await signalHandler;
+}
+
 /**
  * This service is used for handling CLI prompts from the back end.
  */
@@ -127,20 +155,9 @@ export class PromptService {
 
 			promptStore.set({
 				prompt: prompt.prompt,
-				respond: (response: string | null) => {
+				respond: async (response: string | null) => {
 					resolver(response);
-				}
-			});
-
-			signal.addEventListener('abort', () => {
-				promptStore.set(undefined);
-				switch (signal.reason) {
-					case 'timeout':
-						errorStore.set('Timed out waiting for response');
-						break;
-					default:
-						errorStore.set(undefined);
-						break;
+					await handleAbortSignal(signal, promptStore, errorStore);
 				}
 			});
 

apps/desktop/src/lib/components/PromptModal.svelte

@@ -8,23 +8,22 @@
 	const promptService = getContext(PromptService);
 	const [prompt, error] = promptService.reactToPrompt({ timeoutMs: 30000 });
 
-	let value = '';
-	let modal: Modal;
-	let loading = false;
+	let value = $state<string>('');
+	let modal = $state<ReturnType<typeof Modal>>();
+	let loading = $state(false);
 
-	$: if ($prompt) {
-		modal?.show();
-	}
-
-	$: if (!$prompt && !$error) {
-		modal?.close();
-	}
+	$effect(() => {
+		if ($prompt && modal?.imports.open === false && !loading) {
+			modal?.show();
+		}
+	});
 
 	async function submit() {
 		if (!$prompt) return;
 		loading = true;
 		try {
-			$prompt.respond(value);
+			await modal?.close();
+			await $prompt.respond(value);
 		} catch (err) {
 			console.error(err);
 		} finally {
@@ -35,14 +34,19 @@
 
 	async function cancel() {
 		try {
-			if ($prompt) $prompt.respond(null);
+			if ($prompt) await $prompt.respond(null);
 		} catch (err) {
 			console.error(err);
 		} finally {
 			clear();
 		}
 	}
 
+	async function handleCancelButton() {
+		await modal?.close();
+		await cancel();
+	}
+
 	function clear() {
 		prompt.set(undefined);
 		error.set(undefined);
@@ -53,9 +57,9 @@
 <Modal
 	bind:this={modal}
 	width="small"
-	title="Git fetch requires input"
-	onClose={async () => await cancel()}
-	onSubmit={async () => await submit()}
+	title="Git needs input"
+	onClickOutside={cancel}
+	onSubmit={submit}
 >
 	<div class="message">
 		{#if $error}
@@ -67,7 +71,9 @@
 	<Textbox autofocus type="password" bind:value disabled={!!$error || loading} />
 
 	{#snippet controls()}
-		<Button style="ghost" type="reset" outline disabled={loading} onclick={cancel}>Cancel</Button>
+		<Button style="ghost" type="reset" outline disabled={loading} onclick={handleCancelButton}
+			>Cancel</Button
+		>
 		<Button style="pop" type="submit" kind="solid" grow disabled={!!$error || loading} {loading}>
 			Submit
 		</Button>