feat: model-on-demand lifecycle — retry on 503, live status pill, warming indicator

- whisper.ts: add getModelStatus(); fix submitJob() to retry on 503 using
  Retry-After header instead of throwing; optional onModelWaiting callback
  lets the pipeline surface model state to the UI during the wait
- pipeline.ts: pass onModelWaiting callback → emits model_warming SSE event
  so the job detail page can show 'Warming up model…' while waiting
- types.ts: add ModelStateTag union and ModelStatus interface
- api/model/status: GET route proxies whisper /model/status (falls back to
  {state:'unloaded'} if whisper unreachable)
- api/model/events: GET route relays whisper SSE stream to the browser;
  AbortController tied to request.signal cleans up on disconnect
- layout.svelte: status pill is now live — initial fetch + EventSource on
  /api/model/events; dot colour + label reflect real model state with a
  pulsing animation while loading or waiting_for_gpu
- jobs/[id]/+page.svelte: handle model_warming event type → show a yellow
  'Warming up model…' sub-label with spinner inside the progress card
- whisper.test.ts: update submitJob mocks to status:202 to match real API

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/routes/+layout.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import '../app.css';
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
 	import { accent } from '$lib/accent.js';
+	import type { ModelStatus } from '$lib/types.js';
 
 	let { children } = $props();
 
@@ -11,8 +12,43 @@
 	// The store subscriber handles everything; just subscribing here keeps it alive.
 	$effect(() => { void $accent; });
 
+	// ── Model status ───────────────────────────────────────
+	let modelStatus = $state<ModelStatus>({ state: 'unloaded' });
+	let modelEs: EventSource | null = null;
+
+	function refreshModelStatus() {
+		fetch('/api/model/status')
+			.then((r) => r.json())
+			.then((s) => (modelStatus = s as ModelStatus))
+			.catch(() => {});
+	}
+
+	function subscribeModelEvents() {
+		modelEs?.close();
+		modelEs = new EventSource('/api/model/events');
+		modelEs.addEventListener('model_loading',        () => refreshModelStatus());
+		modelEs.addEventListener('model_ready',          () => refreshModelStatus());
+		modelEs.addEventListener('model_unloaded',       () => refreshModelStatus());
+		modelEs.addEventListener('model_waiting_for_gpu',() => refreshModelStatus());
+		modelEs.onerror = () => { /* browser reconnects automatically */ };
+	}
+
+	const modelStateMeta: Record<string, { dot: string; label: string; pulse: boolean }> = {
+		unloaded:        { dot: 'var(--text-dim)',    label: 'model unloaded',  pulse: false },
+		loading:         { dot: '#f0b429',            label: 'model loading…',  pulse: true  },
+		waiting_for_gpu: { dot: '#f97316',            label: 'waiting for GPU', pulse: true  },
+		ready:           { dot: '#5dd47a',            label: 'whisper-large-v3',pulse: false }
+	};
+
+	const modelMeta = $derived(
+		modelStateMeta[modelStatus.state] ?? modelStateMeta.unloaded
+	);
+
 	// Push notification setup
 	onMount(async () => {
+		refreshModelStatus();
+		subscribeModelEvents();
+
 		if (!browser || !('serviceWorker' in navigator) || !('PushManager' in window)) return;
 		try {
 			const reg = await navigator.serviceWorker.ready;
@@ -42,6 +78,8 @@
 		}
 	});
 
+	onDestroy(() => modelEs?.close());
+
 	function urlBase64ToUint8Array(base64: string): Uint8Array {
 		const pad = '='.repeat((4 - (base64.length % 4)) % 4);
 		const b64 = (base64 + pad).replace(/-/g, '+').replace(/_/g, '/');
@@ -135,8 +173,12 @@
 
 		<!-- Status dot -->
 		<div class="status-pill">
-			<div class="status-dot"></div>
-			<span>whisper-large-v3</span>
+			<div
+				class="status-dot"
+				class:pulse={modelMeta.pulse}
+				style="background: {modelMeta.dot}"
+			></div>
+			<span>{modelMeta.label}</span>
 		</div>
 	</nav>
 
@@ -268,8 +310,15 @@
 		width: 6px;
 		height: 6px;
 		border-radius: 3px;
-		background: #5dd47a;
 		flex-shrink: 0;
+		transition: background 0.4s;
+	}
+	.status-dot.pulse {
+		animation: dot-pulse 1.4s ease-in-out infinite;
+	}
+	@keyframes dot-pulse {
+		0%, 100% { opacity: 1; }
+		50%       { opacity: 0.3; }
 	}
 
 	/* ── Main content ─────────────────────────────────────── */

src/routes/api/model/events/+server.ts

@@ -0,0 +1,43 @@
+const WHISPER_URL = process.env.WHISPER_URL ?? 'http://localhost:8080';
+
+/** Relay the whisper /model/events SSE stream to the browser. */
+export async function GET({ request }) {
+	const { default: fetch } = await import('node-fetch');
+
+	const ac = new AbortController();
+	request.signal.addEventListener('abort', () => ac.abort());
+
+	const stream = new ReadableStream({
+		async start(controller) {
+			try {
+				const upstream = await fetch(`${WHISPER_URL}/model/events`, {
+					signal: ac.signal as AbortSignal
+				});
+				if (!upstream.body) {
+					controller.close();
+					return;
+				}
+				for await (const chunk of upstream.body) {
+					if (ac.signal.aborted) break;
+					controller.enqueue(chunk instanceof Buffer ? chunk : Buffer.from(String(chunk)));
+				}
+			} catch {
+				// upstream closed, client disconnected, or whisper unreachable — all fine
+			} finally {
+				controller.close();
+			}
+		},
+		cancel() {
+			ac.abort();
+		}
+	});
+
+	return new Response(stream, {
+		headers: {
+			'Content-Type': 'text/event-stream',
+			'Cache-Control': 'no-cache',
+			Connection: 'keep-alive',
+			'X-Accel-Buffering': 'no'
+		}
+	});
+}

src/routes/api/model/status/+server.ts

@@ -0,0 +1,14 @@
+import { getModelStatus } from '$lib/server/whisper.js';
+
+export async function GET() {
+	try {
+		const status = await getModelStatus();
+		return new Response(JSON.stringify(status), {
+			headers: { 'Content-Type': 'application/json' }
+		});
+	} catch {
+		return new Response(JSON.stringify({ state: 'unloaded' }), {
+			headers: { 'Content-Type': 'application/json' }
+		});
+	}
+}

src/routes/jobs/[id]/+page.svelte

@@ -13,6 +13,7 @@
 	let segments = $state<Segment[]>([]);
 	let error = $state('');
 	let chunkInfo = $state({ chunk: 0, total: 0 });
+	let modelWarming = $state<{ state: string; retryAfterSecs: number } | null>(null);
 	let eventSource: EventSource | null = null;
 
 	const statusLabel: Record<string, string> = {
@@ -83,8 +84,11 @@
 			try {
 				const data = JSON.parse(e.data);
 				if (data.type === 'progress') {
+					modelWarming = null;
 					chunkInfo = { chunk: data.chunk ?? 0, total: data.total ?? 0 };
 					if (job) job = { ...job, progress: data.progress ?? job.progress, status: 'transcribing' };
+				} else if (data.type === 'model_warming') {
+					modelWarming = { state: data.state ?? 'loading', retryAfterSecs: data.retryAfterSecs ?? 30 };
 				} else if (data.type === 'status') {
 					if (job) job = { ...job, status: data.status, progress: data.progress ?? job.progress };
 				} else if (data.type === 'done') {
@@ -215,6 +219,15 @@
 					{/if}
 				</div>
 
+				{#if modelWarming}
+					<div class="warming-notice mono">
+						<svg width="12" height="12" viewBox="0 0 12 12" fill="none" style="flex-shrink:0; animation: spin 1.5s linear infinite">
+							<circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.4" fill="none" stroke-dasharray="14 8"/>
+						</svg>
+						Warming up model ({modelWarming.state.replace(/_/g, ' ')}) — retrying in {modelWarming.retryAfterSecs}s…
+					</div>
+				{/if}
+
 				<!-- Progress bar -->
 				<div class="progress-bar-track">
 					<div
@@ -484,6 +497,16 @@
 		color: var(--text-muted);
 	}
 
+	.warming-notice {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin-top: 10px;
+		font-size: 11.5px;
+		color: #f0b429;
+		opacity: 0.9;
+	}
+
 	.progress-bar-track {
 		height: 4px;
 		border-radius: 2px;