feat: connect chat UI to gRPC-Web streaming with loading indicator

- Wire processRequest() async generator to chat page
- Progressive message rendering as stream chunks arrive
- Animated loading dots while waiting for first chunk
- Error display with OrchestratorError code mapping
- Session ID management with crypto.randomUUID()

Closes #7

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

src/routes/chat/+page.svelte

@@ -2,11 +2,16 @@
 	import type { ChatMessage } from '$lib/types';
 	import MessageList from '$lib/components/MessageList.svelte';
 	import MessageInput from '$lib/components/MessageInput.svelte';
+	import { processRequest, OrchestratorError } from '$lib/services/orchestrator';
 
 	let messages: ChatMessage[] = $state([]);
 	let isStreaming = $state(false);
+	let error: string | null = $state(null);
+	let sessionId = $state(crypto.randomUUID());
+
+	async function handleSend(content: string) {
+		error = null;
 
-	function handleSend(content: string) {
 		const userMessage: ChatMessage = {
 			id: crypto.randomUUID(),
 			role: 'user',
@@ -14,6 +19,40 @@
 			timestamp: new Date()
 		};
 		messages.push(userMessage);
+
+		const assistantMessage: ChatMessage = {
+			id: crypto.randomUUID(),
+			role: 'assistant',
+			content: '',
+			timestamp: new Date()
+		};
+		messages.push(assistantMessage);
+
+		isStreaming = true;
+
+		try {
+			for await (const response of processRequest(sessionId, content)) {
+				const idx = messages.length - 1;
+				messages[idx] = {
+					...messages[idx],
+					content: response.message
+				};
+			}
+		} catch (err) {
+			const msg =
+				err instanceof OrchestratorError
+					? `Error (${err.code}): ${err.message}`
+					: 'An unexpected error occurred';
+			error = msg;
+			// Update the assistant message with the error
+			const idx = messages.length - 1;
+			messages[idx] = {
+				...messages[idx],
+				content: `⚠ ${msg}`
+			};
+		} finally {
+			isStreaming = false;
+		}
 	}
 </script>
 
@@ -23,5 +62,25 @@
 	</header>
 
 	<MessageList {messages} />
+
+	{#if isStreaming && messages.length > 0 && messages[messages.length - 1].content === ''}
+		<div class="flex justify-start px-4 pb-2">
+			<div class="flex items-center gap-1.5 rounded-2xl bg-gray-200 px-4 py-2.5">
+				<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:0ms]"
+				></span>
+				<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:150ms]"
+				></span>
+				<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:300ms]"
+				></span>
+			</div>
+		</div>
+	{/if}
+
+	{#if error}
+		<div class="mx-4 mb-2 rounded-lg bg-red-50 px-4 py-2 text-sm text-red-600">
+			{error}
+		</div>
+	{/if}
+
 	<MessageInput onSend={handleSend} disabled={isStreaming} />
 </div>