From 493c0e1aeb0c79807e455b9895ea454dfdf0113c Mon Sep 17 00:00:00 2001
From: Developer <dev@headquarter.local>
Date: Thu, 9 Jul 2026 20:10:46 +0000
Subject: [PATCH] fix(services): surface validation errors in add-service
 dialog

CreateServiceDialog.save() awaited mutateAsync without a try/catch, so a
backend 422 (e.g. base_url missing http:// schema) threw uncaught and the
dialog sat silent with no feedback. Wrap in try/catch, hold the error in
local state, render a destructive Alert above the footer. Reset/onClose
only on success; on error the user can fix and retry.
---
 frontend/src/pages/ServicesPage.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/ServicesPage.tsx b/frontend/src/pages/ServicesPage.tsx
index a54dcb3..7d4d64b 100644
--- a/frontend/src/pages/ServicesPage.tsx
+++ b/frontend/src/pages/ServicesPage.tsx
@@ -175,9 +175,11 @@ function CreateServiceDialog({
 	const { data: types = [] } = useServiceTypes();
 	const saveService = useSaveServiceInstance();
 	const [draft, setDraft] = useState<CreateDraft | null>(null);
+	const [submitError, setSubmitError] = useState<string | null>(null);
 
 	function reset() {
 		setDraft(null);
+		setSubmitError(null);
 	}
 
 	async function save() {
@@ -190,9 +192,14 @@ function CreateServiceDialog({
 			secrets: draft.secrets,
 			enabled: draft.enabled,
 		};
-		await saveService.mutateAsync(input);
-		reset();
+		setSubmitError(null);
+		try {
+			await saveService.mutateAsync(input);
+			reset();
 		onClose();
+		} catch (err) {
+			setSubmitError(err instanceof Error ? err.message : String(err));
+		}
 	}
 
 	const selectedType = types.find((t) => t.service_type === draft?.serviceType);
@@ -264,6 +271,11 @@ function CreateServiceDialog({
 						</>
 					)}
 				</div>
+				{submitError ? (
+					<Alert variant="destructive">
+						<AlertDescription>{submitError}</AlertDescription>
+					</Alert>
+				) : null}
 				{draft ? (
 					<DialogFooter
 						onCancel={reset}