bug: handle socket reconnect when server sends non-200 response

pkg/api/request.go

@@ -61,6 +61,12 @@ func (r *Context) WriteEvents(events <-chan types.Progress) error {
 		lastFlush time.Time
 		toWrite   []types.Progress
 	)
+	if sendEvents {
+		if _, err := r.ResponseWriter.Write([]byte("event: start\ndata: {}\n\n")); err != nil {
+			return err
+		}
+		r.Flush()
+	}
 	for event := range events {
 		if sendEvents {
 			if err := r.WriteDataEvent(event); err != nil {

ui/user/src/lib/components/Navbar.svelte

@@ -34,7 +34,7 @@
 w-full
 via-80%"
 >
-	<div class="bg-white dark:bg-black p-3">
+	<div class="bg-white p-3 dark:bg-black">
 		<div class="flex items-center justify-between">
 			<Logo />
 			<div class="grow"></div>

ui/user/src/lib/services/chat/thread.svelte.ts

@@ -26,6 +26,7 @@ export class Thread {
 		const reconnect = (): EventSource => {
 			console.log('Message EventSource initializing');
 			this.replayComplete = false;
+			let opened = false;
 			const es = newMessageEventSource(assistant, {
 				task: opts?.task,
 				runID: opts?.runID
@@ -35,16 +36,27 @@ export class Thread {
 			};
 			es.onopen = () => {
 				console.log('Message EventSource opened');
+				opened = true;
 			};
-			es.addEventListener('close', () => {
-				console.log('Message EventSource closed by server');
+			es.addEventListener('reconnect', () => {
+				console.log('Message EventSource reconnecting');
 				opts?.onClose?.();
 				es.close();
 				this.#es = reconnect();
 			});
+			es.addEventListener('close', () => {
+				console.log('Message EventSource closed by server');
+				es.dispatchEvent(new Event('reconnect'));
+			});
 			es.onerror = (e: Event) => {
 				if (e.eventPhase === EventSource.CLOSED) {
 					console.log('Message EventSource closed');
+					if (opened) {
+						opened = false;
+					} else {
+						console.log('Message EventSource failed to open');
+						es.dispatchEvent(new Event('reconnect'));
+					}
 				}
 			};
 			return es;