fix: handle queued prompt edge cases during pending submission and SSE errors

Author: chriswritescode-dev

frontend/src/components/message/PromptInput.stt.test.tsx

@@ -24,6 +24,7 @@ const mocks = vi.hoisted(() => ({
   useSessionAgent: vi.fn(),
   useAgents: vi.fn(),
   useSendPromptMutate: vi.fn(),
+  sendPromptPending: vi.fn(() => false),
   useUserBash: vi.fn(),
   useSessionAgentStore: vi.fn(),
   useSendErrorStore: vi.fn(),
@@ -40,9 +41,9 @@ vi.mock('@/hooks/useMobile', () => ({
 }))
 
 vi.mock('@/hooks/useOpenCode', () => ({
-  useSendPrompt: () => ({ mutate: mocks.useSendPromptMutate }),
+  useSendPrompt: () => ({ mutate: mocks.useSendPromptMutate, isPending: mocks.sendPromptPending() }),
   useAbortSession: () => ({ mutate: vi.fn() }),
-  useSendShell: () => ({ mutate: vi.fn() }),
+  useSendShell: () => ({ mutate: vi.fn(), isPending: false }),
   useOpenCodeClient: () => ({}),
   useAgents: () => ({ data: [] }),
 }))
@@ -162,6 +163,7 @@ describe('PromptInput STT Gesture Tests', () => {
     mocks.useSendPromptMutate.mockImplementation((_variables, options) => {
       options?.onSuccess?.()
     })
+    mocks.sendPromptPending.mockReturnValue(false)
 
     mocks.useMobile.mockReturnValue(true)
     mocks.useSTT.mockReturnValue({
@@ -274,6 +276,54 @@ describe('PromptInput STT Gesture Tests', () => {
       })
     })
 
+    it('clears submitted text once the server confirms it is processing', async () => {
+      mocks.useSendPromptMutate.mockImplementation(() => undefined)
+      const queryClient = createTestQueryClient()
+      const { rerender } = render(
+        <QueryClientProvider client={queryClient}>
+          <PromptInput {...defaultProps} />
+        </QueryClientProvider>,
+      )
+
+      const input = screen.getByPlaceholderText('Send a message...')
+      fireEvent.change(input, { target: { value: 'do the thing' } })
+      fireEvent.click(screen.getByTitle('Send'))
+
+      expect(input).toHaveValue('do the thing')
+
+      rerender(
+        <QueryClientProvider client={queryClient}>
+          <PromptInput {...defaultProps} isStreamingResponse />
+        </QueryClientProvider>,
+      )
+
+      await waitFor(() => {
+        expect(input).toHaveValue('')
+      })
+    })
+
+    it('allows queuing a follow-up while a non-queued send is pending', async () => {
+      mocks.sendPromptPending.mockReturnValue(true)
+      render(
+        <QueryClientProvider client={createTestQueryClient()}>
+          <PromptInput {...defaultProps} isStreamingResponse />
+        </QueryClientProvider>,
+      )
+
+      const input = screen.getByPlaceholderText('Send a message...')
+      fireEvent.change(input, { target: { value: 'follow-up' } })
+
+      const queueButton = screen.getByTitle('Queue message')
+      expect(queueButton).not.toBeDisabled()
+
+      fireEvent.click(queueButton)
+
+      expect(mocks.useSendPromptMutate).toHaveBeenCalledWith(
+        expect.objectContaining({ prompt: 'follow-up', queued: true }),
+        expect.any(Object),
+      )
+    })
+
     it('restores a failed queued prompt when the input is empty', async () => {
       const queryClient = createTestQueryClient()
       const { rerender } = render(

frontend/src/components/message/PromptInput.tsx

@@ -174,7 +174,21 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
     setSelectedAgent(null)
     clearSTT()
   }, [clearSTT])
-  
+
+  const pendingConfirmClearRef = useRef<{
+    prompt: string
+    files: Map<string, FileAttachmentInfo>
+    images: ImageAttachment[]
+  } | null>(null)
+
+  useEffect(() => {
+    if (!isStreamingResponse) return
+    const pending = pendingConfirmClearRef.current
+    if (!pending) return
+    pendingConfirmClearRef.current = null
+    clearSubmittedPrompt(pending.prompt, pending.files, pending.images)
+  }, [isStreamingResponse, clearSubmittedPrompt])
+
   useImperativeHandle(ref, () => ({
     setPromptValue: (value: string) => {
       setPrompt(value)
@@ -262,7 +276,6 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
 
   const handleSubmit = () => {
     if (disabled) return
-    if (isPromptSubmitPending) return
     if (!prompt.trim() && imageAttachments.length === 0) return
 
     pendingVoiceAutoSubmitRef.current = false
@@ -296,6 +309,8 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
       return
     }
 
+    if (isPromptSubmitPending) return
+
     if (isBashMode) {
       const command = prompt.startsWith('!') ? prompt.slice(1) : prompt
       addUserBashCommand(command)
@@ -340,6 +355,12 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
     const submittedAttachedFiles = attachedFiles
     const submittedImageAttachments = imageAttachments
 
+    pendingConfirmClearRef.current = {
+      prompt: submittedPrompt,
+      files: submittedAttachedFiles,
+      images: submittedImageAttachments
+    }
+
     sendPrompt.mutate(
       {
         sessionID,
@@ -350,7 +371,13 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
         variant: currentVariant
       },
       {
-        onSuccess: () => clearSubmittedPrompt(submittedPrompt, submittedAttachedFiles, submittedImageAttachments)
+        onSuccess: () => {
+          pendingConfirmClearRef.current = null
+          clearSubmittedPrompt(submittedPrompt, submittedAttachedFiles, submittedImageAttachments)
+        },
+        onError: () => {
+          pendingConfirmClearRef.current = null
+        }
       }
     )
 
@@ -1367,7 +1394,7 @@ return (
             <button
               data-submit-prompt
               onClick={hasPendingPermissionForSession ? () => setShowDialog(true) : handleSubmit}
-              disabled={hasPendingPermissionForSession ? false : ((!prompt.trim() && imageAttachments.length === 0) || disabled || isPromptSubmitPending)}
+              disabled={hasPendingPermissionForSession ? false : ((!prompt.trim() && imageAttachments.length === 0) || disabled || (isPromptSubmitPending && !isStreamingResponse))}
               className={`px-4 md:px-5 py-1.5 md:py-2 rounded-lg text-sm font-medium transition-colors dark:border flex-shrink-0 min-w-[52px] ${
                 hasPendingPermissionForSession
                   ? 'bg-orange-500 hover:bg-orange-600 border-orange-400 text-primary-foreground ring-orange-500/20'

frontend/src/hooks/useSSE.test.tsx

@@ -401,7 +401,7 @@ describe('useSSE', () => {
     unmount()
   })
 
-  it('clears queued prompt text when the queued user message is observed', async () => {
+  it('does not create a send error banner once the queued prompt has been cleared', async () => {
     const queryClient = new QueryClient({
       defaultOptions: {
         queries: { retry: false },
@@ -453,11 +453,7 @@ describe('useSSE', () => {
       })
     })
 
-    expect(useSendErrorStore.getState().getError('session-1')).toEqual({
-      sessionID: 'session-1',
-      title: 'Error',
-      message: 'Unrelated failure',
-    })
+    expect(useSendErrorStore.getState().getError('session-1')).toBeNull()
 
     unmount()
   })

frontend/src/hooks/useSSE.ts

@@ -373,7 +373,7 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string
     if (!client || !primaryDirectory) return
 
     const interval = setInterval(() => {
-      void fetchInitialData()
+      void fetchInitialData().catch(() => undefined)
     }, STATUS_POLL_INTERVAL_MS)
 
     return () => clearInterval(interval)
@@ -417,7 +417,7 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string
 
       if (connected) {
         setError(null)
-        fetchInitialData()
+        void fetchInitialData().catch(() => undefined)
         syncCurrentSession()
         eventStreamSubscriptionRef.current?.reportVisibility(document.visibilityState === 'visible', sessionIdRef.current)
       } else {

frontend/src/stores/sendErrorStore.test.ts

@@ -41,4 +41,14 @@ describe('useSendErrorStore', () => {
     })
     expect(useSendErrorStore.getState().queuedPrompts['session-1']).toBeUndefined()
   })
+
+  it('does not store an error when no queued prompt was tracked', () => {
+    useSendErrorStore.getState().failQueuedPrompt({
+      sessionID: 'session-1',
+      title: 'Error',
+      message: 'Failed',
+    })
+
+    expect(useSendErrorStore.getState().getError('session-1')).toBeNull()
+  })
 })

frontend/src/stores/sendErrorStore.ts

@@ -42,12 +42,13 @@ export const useSendErrorStore = create<SendErrorStore>((set, get) => ({
   failQueuedPrompt: (err: Omit<SendError, 'failedPrompt'>) => {
     set((state) => {
       const failedPrompt = state.queuedPrompts[err.sessionID]
+      if (!failedPrompt) return state
       const queuedPrompts = { ...state.queuedPrompts }
       delete queuedPrompts[err.sessionID]
       return {
         errors: {
           ...state.errors,
-          [err.sessionID]: failedPrompt ? { ...err, failedPrompt } : err,
+          [err.sessionID]: { ...err, failedPrompt },
         },
         queuedPrompts,
       }