feat(search): add SmartSearchStatus full-area panels (#739)

Loading panel (role=status, motion-safe spinner + pulsing subtitle) and
combined error panels: 503 (red icon + switch-to-keyword button) and
429 (amber clock icon, no action button). 5 vitest-browser-svelte specs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/routes/search/SmartSearchStatus.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+type SmartSearchErrorCode = 'SMART_SEARCH_UNAVAILABLE' | 'SMART_SEARCH_RATE_LIMITED';
+
+let {
+	status,
+	errorCode,
+	onSwitchToKeyword
+}: {
+	status: 'loading' | 'error';
+	errorCode?: SmartSearchErrorCode;
+	onSwitchToKeyword?: () => void;
+} = $props();
+
+const isRateLimited = $derived(errorCode === 'SMART_SEARCH_RATE_LIMITED');
+const title = $derived(
+	isRateLimited ? m.search_error_rate_limited() : m.search_error_unavailable()
+);
+const body = $derived(
+	isRateLimited ? m.search_error_rate_limited_body() : m.search_error_unavailable_body()
+);
+</script>
+
+{#if status === 'loading'}
+	<div
+		role="status"
+		aria-live="polite"
+		class="flex flex-col items-center justify-center gap-3 py-16 text-center"
+	>
+		<div
+			aria-hidden="true"
+			class="h-9 w-9 rounded-full border-[3px] border-primary/12 border-t-primary motion-safe:animate-spin"
+		></div>
+		<p class="text-sm font-bold text-ink">{m.search_loading_nl()}</p>
+		<p class="max-w-xs text-[9px] text-ink-3 motion-safe:animate-pulse">
+			{m.search_loading_nl_sub()}
+		</p>
+	</div>
+{:else if status === 'error'}
+	<div role="alert" class="flex flex-col items-center justify-center gap-3 py-16 text-center">
+		<div
+			aria-hidden="true"
+			class="flex h-10 w-10 items-center justify-center rounded-full border-2 text-lg font-bold {isRateLimited
+				? 'border-amber-400 bg-amber-50 text-amber-600'
+				: 'border-red-400 bg-red-50 text-red-600'}"
+		>
+			{#if isRateLimited}
+				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5">
+					<circle cx="12" cy="12" r="9" />
+					<path d="M12 7v5l3 2" stroke-linecap="round" stroke-linejoin="round" />
+				</svg>
+			{:else}
+				<span>!</span>
+			{/if}
+		</div>
+		<p class="text-sm font-bold text-ink">{title}</p>
+		<p class="max-w-xs text-xs text-ink-3">{body}</p>
+		{#if !isRateLimited}
+			<button
+				type="button"
+				onclick={onSwitchToKeyword}
+				class="mt-2 inline-flex min-h-[44px] items-center rounded border border-primary bg-primary px-4 py-2 text-sm font-bold text-primary-fg outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
+			>
+				{m.search_switch_to_keyword()}
+			</button>
+		{/if}
+	</div>
+{/if}