Fix SSE reliability and message delivery for production environments (#85)

* Switch to sync prompt endpoint for reliable message delivery

Use the synchronous /message endpoint instead of /prompt_async to ensure
the UI receives authoritative response data. This matches OpenCode TUI
behavior and prevents message desync during sub-agent tasks.

* Add SSE heartbeat to prevent Cloudflare 524 timeout

Author: chriswritescode-dev

backend/src/routes/sse.ts

@@ -3,6 +3,9 @@ import { stream } from 'hono/streaming'
 import { sseAggregator } from '../services/sse-aggregator'
 import { SSESubscribeSchema } from '@opencode-manager/shared/schemas'
 import { logger } from '../utils/logger'
+import { DEFAULTS } from '@opencode-manager/shared/config'
+
+const { HEARTBEAT_INTERVAL_MS } = DEFAULTS.SSE
 
 export function createSSERoutes() {
   const app = new Hono()
@@ -36,7 +39,16 @@ export function createSSERoutes() {
         directories
       )
 
+      const heartbeatInterval = setInterval(() => {
+        try {
+          writeSSE('heartbeat', JSON.stringify({ timestamp: Date.now() }))
+        } catch {
+          clearInterval(heartbeatInterval)
+        }
+      }, HEARTBEAT_INTERVAL_MS)
+
       writer.onAbort(() => {
+        clearInterval(heartbeatInterval)
         cleanup()
       })
 

frontend/src/api/opencode.ts

@@ -12,6 +12,9 @@ type CommandRequest = NonNullable<paths['/session/{sessionID}/command']['post'][
 type ShellRequest = NonNullable<paths['/session/{sessionID}/shell']['post']['requestBody']>['content']['application/json']
 type AgentListResponse = paths['/agent']['get']['responses']['200']['content']['application/json']
 type QuestionListResponse = paths['/question']['get']['responses']['200']['content']['application/json']
+type SendPromptResponse = paths['/session/{sessionID}/message']['post']['responses']['200']['content']['application/json']
+
+export type { SendPromptResponse }
 
 export class OpenCodeClient {
   private client: AxiosInstance
@@ -78,8 +81,13 @@ export class OpenCodeClient {
     return response.data
   }
 
-  async sendPrompt(sessionID: string, data: SendPromptRequest): Promise<void> {
-    await this.client.post(`/session/${sessionID}/prompt_async`, data)
+  async sendPrompt(sessionID: string, data: SendPromptRequest): Promise<SendPromptResponse> {
+    const response = await this.client.post<SendPromptResponse>(
+      `/session/${sessionID}/message`,
+      data,
+      { timeout: 0 }
+    )
+    return response.data
   }
 
   async summarizeSession(sessionID: string, providerID: string, modelID: string) {

frontend/src/hooks/useOpenCode.ts

@@ -328,15 +328,26 @@ export const useSendPrompt = (opcodeUrl: string | null | undefined, directory?:
         requestData.variant = variant;
       }
 
-      await client.sendPrompt(sessionID, requestData);
+      const response = await client.sendPrompt(sessionID, requestData);
 
-      return { optimisticUserID, userPromptText };
+      return { optimisticUserID, userPromptText, response };
     },
     onError: (error, variables) => {
       const { sessionID } = variables;
+      const messagesQueryKey = ["opencode", "messages", opcodeUrl, sessionID, directory];
+      
+      const axiosError = error as { code?: string; response?: unknown };
+      const isNetworkError = axiosError.code === 'ECONNABORTED' || 
+                            axiosError.code === 'ERR_NETWORK' ||
+                            !axiosError.response;
+      
+      if (isNetworkError) {
+        return;
+      }
+      
       setSessionStatus(sessionID, { type: "idle" });
       queryClient.setQueryData<MessageListResponse>(
-        ["opencode", "messages", opcodeUrl, sessionID, directory],
+        messagesQueryKey,
         (old) => old?.filter((msg) => !msg.info.id.startsWith("optimistic_")),
       );
 
@@ -348,16 +359,28 @@ export const useSendPrompt = (opcodeUrl: string | null | undefined, directory?:
     },
     onSuccess: async (data, variables) => {
       const { sessionID } = variables;
-      const { optimisticUserID, userPromptText } = data;
+      const { optimisticUserID, userPromptText, response } = data;
+      const messagesQueryKey = ["opencode", "messages", opcodeUrl, sessionID, directory];
 
       queryClient.setQueryData<MessageListResponse>(
-        ["opencode", "messages", opcodeUrl, sessionID, directory],
+        messagesQueryKey,
         (old) => {
           if (!old) return old;
-          return old.filter((msg) => msg.info.id !== optimisticUserID);
+          const withoutOptimistic = old.filter((msg) => msg.info.id !== optimisticUserID);
+          
+          const existingIdx = withoutOptimistic.findIndex(m => m.info.id === response.info.id);
+          if (existingIdx >= 0) {
+            const updated = [...withoutOptimistic];
+            updated[existingIdx] = { info: response.info, parts: response.parts };
+            return updated;
+          }
+          
+          return [...withoutOptimistic, { info: response.info, parts: response.parts }];
         },
       );
 
+      setSessionStatus(sessionID, { type: "idle" });
+
       queryClient.invalidateQueries({
         queryKey: ["opencode", "session", opcodeUrl, sessionID, directory],
       });

frontend/src/hooks/useSSE.ts

@@ -214,7 +214,8 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string,
 
         setSessionStatus(sessionID, { type: 'idle' })
 
-        const currentData = queryClient.getQueryData<MessageListResponse>(['opencode', 'messages', opcodeUrl, sessionID, directory])
+        const messagesQueryKey = ['opencode', 'messages', opcodeUrl, sessionID, directory]
+        const currentData = queryClient.getQueryData<MessageListResponse>(messagesQueryKey)
         if (!currentData) break
 
         const now = Date.now()
@@ -253,7 +254,9 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string,
           }
         })
 
-        queryClient.setQueryData(['opencode', 'messages', opcodeUrl, sessionID, directory], updated)
+        queryClient.setQueryData(messagesQueryKey, updated)
+        
+        queryClient.invalidateQueries({ queryKey: messagesQueryKey })
         break
       }
 

frontend/src/lib/sseManager.ts

@@ -207,6 +207,10 @@ class SSEManager {
         // Ignore
       }
     })
+
+    this.eventSource.addEventListener('heartbeat', () => {
+      // Heartbeat received - connection is alive
+    })
   }
 
   private disconnect(): void {

shared/src/config/defaults.ts

@@ -47,6 +47,7 @@ export const DEFAULTS = {
     RECONNECT_DELAY_MS: 1000,
     MAX_RECONNECT_DELAY_MS: 30000,
     IDLE_GRACE_PERIOD_MS: 5000,
+    HEARTBEAT_INTERVAL_MS: 60000,
   },
 } as const