Add SSE reconnection before critical actions and handle Cloudflare 524 errors

Author: chriswritescode-dev

frontend/src/contexts/EventContext.tsx

@@ -6,7 +6,7 @@ import { OpenCodeClient } from '@/api/opencode'
 import { listRepos } from '@/api/repos'
 import type { PermissionRequest, PermissionResponse, QuestionRequest, SSEEvent } from '@/api/types'
 import { showToast } from '@/lib/toast'
-import { subscribeToSSE, addSSEDirectory } from '@/lib/sseManager'
+import { subscribeToSSE, addSSEDirectory, ensureSSEConnected } from '@/lib/sseManager'
 import { OPENCODE_API_ENDPOINT } from '@/config'
 import { addToSessionKeyedState, removeFromSessionKeyedState } from '@/lib/sessionKeyedState'
 
@@ -156,13 +156,23 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
   }, [allPermissions.length, showPermissionDialog])
 
   const respondToPermission = useCallback(async (permissionID: string, sessionID: string, response: PermissionResponse) => {
+    const connected = await ensureSSEConnected()
+    if (!connected) {
+      showToast.error('Unable to connect. Please try again.')
+      throw new Error('SSE connection failed')
+    }
     const client = getClient(sessionID)
     if (!client) throw new Error('No client found for session')
     await client.respondToPermission(sessionID, permissionID, response)
     removePermission(permissionID, sessionID)
   }, [getClient, removePermission])
 
   const replyToQuestion = useCallback(async (requestID: string, answers: string[][]) => {
+    const connected = await ensureSSEConnected()
+    if (!connected) {
+      showToast.error('Unable to connect. Please try again.')
+      throw new Error('SSE connection failed')
+    }
     const question = Object.values(questionsBySession).flat().find(q => q.id === requestID)
     if (!question) throw new Error('Question not found')
     const client = getClient(question.sessionID)
@@ -172,6 +182,11 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
   }, [getClient, removeQuestion, questionsBySession])
 
   const rejectQuestion = useCallback(async (requestID: string) => {
+    const connected = await ensureSSEConnected()
+    if (!connected) {
+      showToast.error('Unable to connect. Please try again.')
+      throw new Error('SSE connection failed')
+    }
     const question = Object.values(questionsBySession).flat().find(q => q.id === requestID)
     if (!question) throw new Error('Question not found')
     const client = getClient(question.sessionID)

frontend/src/hooks/useOpenCode.ts

@@ -11,6 +11,7 @@ import type { paths, components } from "../api/opencode-types";
 import { parseNetworkError } from "../lib/opencode-errors";
 import { showToast } from "../lib/toast";
 import { useSessionStatus } from "../stores/sessionStatusStore";
+import { ensureSSEConnected, reconnectSSE } from "../lib/sseManager";
 
 const titleGeneratingSessionsState = new Set<string>();
 const titleGeneratingListeners = new Set<() => void>();
@@ -267,6 +268,12 @@ export const useSendPrompt = (opcodeUrl: string | null | undefined, directory?:
     }) => {
       if (!client) throw new Error("No client available");
 
+      const connected = await ensureSSEConnected();
+      if (!connected) {
+        showToast.error("Unable to connect. Please try again.");
+        throw new Error("SSE connection failed");
+      }
+
       setSessionStatus(sessionID, { type: "busy" });
 
       const optimisticUserID = `optimistic_user_${Date.now()}_${Math.random()}`;
@@ -344,6 +351,13 @@ export const useSendPrompt = (opcodeUrl: string | null | undefined, directory?:
       if (isNetworkError) {
         return;
       }
+
+      const fetchError = error as { statusCode?: number };
+      const isCloudflareTimeout = fetchError.statusCode === 524;
+      if (isCloudflareTimeout) {
+        reconnectSSE();
+        return;
+      }
 
       setSessionStatus(sessionID, { type: "idle" });
       queryClient.setQueryData<MessageListResponse>(

frontend/src/lib/sseManager.ts

@@ -265,6 +265,51 @@ class SSEManager {
   getConnectionStatus(): boolean {
     return this.isConnected
   }
+
+  async ensureConnected(timeoutMs: number = 5000): Promise<boolean> {
+    if (this.isConnected && this.clientId) {
+      return true
+    }
+
+    if (this.subscribers.size === 0) {
+      return false
+    }
+
+    this.reconnectDelay = RECONNECT_DELAY_MS
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout)
+      this.reconnectTimeout = null
+    }
+    
+    if (this.eventSource) {
+      this.eventSource.close()
+      this.eventSource = null
+    }
+
+    return new Promise<boolean>((resolve) => {
+      const timeout = setTimeout(() => {
+        resolve(false)
+      }, timeoutMs)
+
+      const checkConnection = () => {
+        if (this.isConnected && this.clientId) {
+          clearTimeout(timeout)
+          resolve(true)
+        }
+      }
+
+      const originalNotify = this.notifyStatusChange.bind(this)
+      this.notifyStatusChange = (connected: boolean) => {
+        originalNotify(connected)
+        if (connected) {
+          this.notifyStatusChange = originalNotify
+          checkConnection()
+        }
+      }
+
+      this.connect()
+    })
+  }
 }
 
 export const sseManager = SSEManager.getInstance()
@@ -291,3 +336,7 @@ export function reconnectSSE(): void {
 export function isSSEConnected(): boolean {
   return sseManager.getConnectionStatus()
 }
+
+export async function ensureSSEConnected(timeoutMs?: number): Promise<boolean> {
+  return sseManager.ensureConnected(timeoutMs)
+}