fix sse frontend issue (#84)

Author: chriswritescode-dev

frontend/src/hooks/useOpenCode.ts

@@ -279,8 +279,12 @@ export const useSendPrompt = (opcodeUrl: string | null | undefined, directory?:
         contentParts,
         optimisticUserID,
       );
+
+      const messagesQueryKey = ["opencode", "messages", opcodeUrl, sessionID, directory];
+      await queryClient.cancelQueries({ queryKey: messagesQueryKey });
+
       queryClient.setQueryData<MessageListResponse>(
-        ["opencode", "messages", opcodeUrl, sessionID, directory],
+        messagesQueryKey,
         (old) => [...(old || []), userMessage],
       );
 
@@ -348,7 +352,10 @@ export const useSendPrompt = (opcodeUrl: string | null | undefined, directory?:
 
       queryClient.setQueryData<MessageListResponse>(
         ["opencode", "messages", opcodeUrl, sessionID, directory],
-        (old) => old?.filter((msg) => msg.info.id !== optimisticUserID) || [],
+        (old) => {
+          if (!old) return old;
+          return old.filter((msg) => msg.info.id !== optimisticUserID);
+        },
       );
 
       queryClient.invalidateQueries({
@@ -511,8 +518,12 @@ export const useSendShell = (opcodeUrl: string | null | undefined, directory?: s
         [{ type: "text" as const, content: command }],
         optimisticUserID,
       );
+
+      const messagesQueryKey = ["opencode", "messages", opcodeUrl, sessionID, directory];
+      await queryClient.cancelQueries({ queryKey: messagesQueryKey });
+
       queryClient.setQueryData<MessageListResponse>(
-        ["opencode", "messages", opcodeUrl, sessionID, directory],
+        messagesQueryKey,
         (old) => [...(old || []), userMessage],
       );
 
@@ -528,7 +539,10 @@ export const useSendShell = (opcodeUrl: string | null | undefined, directory?: s
       setSessionStatus(sessionID, { type: "idle" });
       queryClient.setQueryData<MessageListResponse>(
         ["opencode", "messages", opcodeUrl, sessionID, directory],
-        (old) => old?.filter((msg) => !msg.info.id.startsWith("optimistic_")),
+        (old) => {
+          if (!old) return old;
+          return old.filter((msg) => !msg.info.id.startsWith("optimistic_"));
+        },
       );
     },
     onSuccess: (data, variables) => {
@@ -537,7 +551,10 @@ export const useSendShell = (opcodeUrl: string | null | undefined, directory?: s
 
       queryClient.setQueryData<MessageListResponse>(
         ["opencode", "messages", opcodeUrl, sessionID, directory],
-        (old) => old?.filter((msg) => msg.info.id !== optimisticUserID) || [],
+        (old) => {
+          if (!old) return old;
+          return old.filter((msg) => msg.info.id !== optimisticUserID);
+        },
       );
 
       queryClient.invalidateQueries({

frontend/src/hooks/useSSE.ts

@@ -126,9 +126,10 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string,
           setSessionStatus(sessionID, isComplete ? { type: 'idle' } : { type: 'busy' })
         }
 
-        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) {
-          queryClient.setQueryData(['opencode', 'messages', opcodeUrl, sessionID, directory], [{ info, parts: [] }])
+          queryClient.invalidateQueries({ queryKey: messagesQueryKey })
           return
         }
 
@@ -138,7 +139,7 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string,
           const filteredData = info.role === 'user' 
             ? currentData.filter(msg => !msg.info.id.startsWith('optimistic_'))
             : currentData
-          queryClient.setQueryData(['opencode', 'messages', opcodeUrl, sessionID, directory], [...filteredData, { info, parts: [] }])
+          queryClient.setQueryData(messagesQueryKey, [...filteredData, { info, parts: [] }])
           return
         }
 
@@ -150,7 +151,7 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string,
           }
         })
 
-        queryClient.setQueryData(['opencode', 'messages', opcodeUrl, sessionID, directory], updated)
+        queryClient.setQueryData(messagesQueryKey, updated)
         break
       }