fix(frontend): show error on training start failure, add aria-live and dismiss to success message

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/components/OcrTrainingCard.svelte

@@ -21,6 +21,7 @@ let { trainingInfo }: Props = $props();
 
 let training = $state(false);
 let successMessage = $state<string | null>(null);
+let errorMessage = $state<string | null>(null);
 
 const available = $derived(trainingInfo?.availableBlocks ?? 0);
 const tooFewBlocks = $derived(available < 5);
@@ -30,6 +31,7 @@ const disabled = $derived(training || tooFewBlocks || serviceDown);
 async function startTraining() {
 	training = true;
 	successMessage = null;
+	errorMessage = null;
 	try {
 		const res = await fetch('/api/ocr/train', { method: 'POST' });
 		if (res.ok) {
@@ -37,7 +39,11 @@ async function startTraining() {
 			setTimeout(() => {
 				successMessage = null;
 			}, 5000);
+		} else {
+			errorMessage = m.training_start_failed();
 		}
+	} catch {
+		errorMessage = m.training_start_failed();
 	} finally {
 		training = false;
 	}
@@ -72,7 +78,19 @@ async function startTraining() {
 	{/if}
 
 	{#if successMessage}
-		<p class="mt-2 text-xs text-green-700">{successMessage}</p>
+		<p class="mt-2 flex items-center gap-2 text-xs text-green-700" aria-live="polite">
+			{successMessage}
+			<button
+				type="button"
+				class="underline hover:no-underline"
+				onclick={() => (successMessage = null)}
+				aria-label={m.comp_dismiss()}>×</button
+			>
+		</p>
+	{/if}
+
+	{#if errorMessage}
+		<p class="mt-2 text-xs text-red-600" aria-live="assertive">{errorMessage}</p>
 	{/if}
 
 	<h3 class="mt-6 mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">