feat: replace event-source-polyfill with native SSE for PromptInput

chriswritescode-dev · chriswritescode-dev · commit 3d650203904f · 2026-06-09T20:20:52.000-04:00
diff --git a/frontend/src/components/message/PromptInput.stt.test.tsx b/frontend/src/components/message/PromptInput.stt.test.tsx
@@ -23,6 +23,7 @@ const mocks = vi.hoisted(() => ({
   useVariants: vi.fn(),
   useSessionAgent: vi.fn(),
   useAgents: vi.fn(),
+  useSendPromptMutate: vi.fn(),
   useUserBash: vi.fn(),
   useSessionAgentStore: vi.fn(),
   useSettings: vi.fn(),
@@ -38,7 +39,7 @@ vi.mock('@/hooks/useMobile', () => ({
 }))
 
 vi.mock('@/hooks/useOpenCode', () => ({
-  useSendPrompt: () => ({ mutate: vi.fn() }),
+  useSendPrompt: () => ({ mutate: mocks.useSendPromptMutate }),
   useAbortSession: () => ({ mutate: vi.fn() }),
   useSendShell: () => ({ mutate: vi.fn() }),
   useOpenCodeClient: () => ({}),
@@ -153,6 +154,9 @@ describe('PromptInput STT Gesture Tests', () => {
     mockReset.mockReturnValue(undefined)
     mockClear.mockReturnValue(undefined)
     mockSetAgent.mockClear()
+    mocks.useSendPromptMutate.mockImplementation((_variables, options) => {
+      options?.onSuccess?.()
+    })
 
     mocks.useMobile.mockReturnValue(true)
     mocks.useSTT.mockReturnValue({
@@ -189,8 +193,8 @@ describe('PromptInput STT Gesture Tests', () => {
     })
     mocks.useSessionAgent.mockReturnValue({ agent: 'default' })
     mocks.useAgents.mockReturnValue({ data: [] })
-    mocks.useUserBash.mockReturnValue({ addUserBashCommand: vi.fn() })
-    mocks.useSessionAgentStore.mockReturnValue({ setAgent: mockSetAgent })
+    mocks.useUserBash.mockImplementation((selector) => selector({ addUserBashCommand: vi.fn() }))
+    mocks.useSessionAgentStore.mockImplementation((selector) => selector({ setAgent: mockSetAgent }))
     useUIState.getState().clearPendingPromptCommand()
     useUIState.getState().clearPendingPromptFile()
   })
@@ -241,6 +245,29 @@ describe('PromptInput STT Gesture Tests', () => {
   }
 
   describe('quick tap behavior', () => {
+    it('keeps submitted text until send succeeds', async () => {
+      mocks.useSendPromptMutate.mockImplementation(() => undefined)
+      renderComponent()
+
+      const input = screen.getByPlaceholderText('Send a message...')
+      fireEvent.change(input, { target: { value: 'retry me' } })
+      fireEvent.click(screen.getByTitle('Send'))
+
+      expect(input).toHaveValue('retry me')
+    })
+
+    it('clears submitted text after send success', async () => {
+      renderComponent()
+
+      const input = screen.getByPlaceholderText('Send a message...')
+      fireEvent.change(input, { target: { value: 'sent message' } })
+      fireEvent.click(screen.getByTitle('Send'))
+
+      await waitFor(() => {
+        expect(input).toHaveValue('')
+      })
+    })
+
     it('inserts a command selected from the mobile drawer', async () => {
       renderComponent()
 
diff --git a/frontend/src/components/message/PromptInput.tsx b/frontend/src/components/message/PromptInput.tsx
@@ -117,6 +117,9 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
   const ignoreVoiceClickUntilRef = useRef(0)
   const voiceStartRequestRef = useRef(0)
   const handleSubmitRef = useRef<() => void>(() => {})
+  const promptRef = useRef(prompt)
+  const attachedFilesRef = useRef(attachedFiles)
+  const imageAttachmentsRef = useRef(imageAttachments)
   const pendingPromptCommand = useUIState((state) => state.pendingPromptCommand)
   const pendingPromptFile = useUIState((state) => state.pendingPromptFile)
   const clearPendingPromptCommand = useUIState((state) => state.clearPendingPromptCommand)
@@ -148,6 +151,29 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
     setIsVoiceAutoSendPending(false)
     setIsVoiceAutoSendWaitingForTranscript(false)
   }, [])
+
+  useEffect(() => {
+    promptRef.current = prompt
+    attachedFilesRef.current = attachedFiles
+    imageAttachmentsRef.current = imageAttachments
+  }, [attachedFiles, imageAttachments, prompt])
+
+  const clearSubmittedPrompt = useCallback((submittedPrompt: string, submittedAttachedFiles: Map<string, FileAttachmentInfo>, submittedImageAttachments: ImageAttachment[]) => {
+    if (
+      promptRef.current !== submittedPrompt ||
+      attachedFilesRef.current !== submittedAttachedFiles ||
+      imageAttachmentsRef.current !== submittedImageAttachments
+    ) {
+      return
+    }
+
+    setPrompt('')
+    setAttachedFiles(new Map())
+    revokeBlobUrls(submittedImageAttachments)
+    setImageAttachments([])
+    setSelectedAgent(null)
+    clearSTT()
+  }, [clearSTT])
   
   useImperativeHandle(ref, () => ({
     setPromptValue: (value: string) => {
@@ -174,6 +200,7 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
   }), [imageAttachments, clearSTT, isRecording, abortRecording, resetVoiceGestureState])
   const sendPrompt = useSendPrompt(opcodeUrl, directory)
   const sendShell = useSendShell(opcodeUrl, directory)
+  const isPromptSubmitPending = sendPrompt.isPending || sendShell.isPending
   const abortSession = useAbortSession(opcodeUrl, directory, sessionID)
   const { filterCommands } = useCommands(opcodeUrl)
   const { executeCommand } = useCommandHandler({
@@ -225,6 +252,7 @@ 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
@@ -234,39 +262,49 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
       onScrollToBottom()
       const parts = parsePromptToParts(prompt, attachedFiles, imageAttachments)
       const agentUsed = selectedAgent || currentMode
-      sendPrompt.mutate({
-        sessionID,
-        parts,
-        model: currentModel,
-        agent: agentUsed,
-        variant: currentVariant,
-        queued: true
-      })
+      const submittedPrompt = prompt
+      const submittedAttachedFiles = attachedFiles
+      const submittedImageAttachments = imageAttachments
+      sendPrompt.mutate(
+        {
+          sessionID,
+          parts,
+          model: currentModel,
+          agent: agentUsed,
+          variant: currentVariant,
+          queued: true
+        },
+        {
+          onSuccess: () => clearSubmittedPrompt(submittedPrompt, submittedAttachedFiles, submittedImageAttachments)
+        }
+      )
       setStoredAgent(sessionID, agentUsed)
       if (model) {
         setStoredModel({ providerID: model.providerID, modelID: model.modelID })
       }
-      setPrompt('')
-      setAttachedFiles(new Map())
-      revokeBlobUrls(imageAttachments)
-      setImageAttachments([])
-      setSelectedAgent(null)
-      clearSTT()
       return
     }
 
     if (isBashMode) {
       const command = prompt.startsWith('!') ? prompt.slice(1) : prompt
       addUserBashCommand(command)
-      sendShell.mutate({
-        sessionID,
-        command,
-        agent: currentMode
-      })
+      const submittedPrompt = prompt
+      sendShell.mutate(
+        {
+          sessionID,
+          command,
+          agent: currentMode
+        },
+        {
+          onSuccess: () => {
+            if (promptRef.current !== submittedPrompt) return
+            setPrompt('')
+            setIsBashMode(false)
+            clearSTT()
+          }
+        }
+      )
       setStoredAgent(sessionID, currentMode)
-      setPrompt('')
-      setIsBashMode(false)
-      clearSTT()
       return
     }
 
@@ -287,27 +325,29 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
 
     const parts = parsePromptToParts(prompt, attachedFiles, imageAttachments)
     const agentUsed = selectedAgent || currentMode
+    const submittedPrompt = prompt
+    const submittedAttachedFiles = attachedFiles
+    const submittedImageAttachments = imageAttachments
 
-    sendPrompt.mutate({
-      sessionID,
-      parts,
-      model: currentModel,
-      agent: agentUsed,
-      variant: currentVariant
-    })
+    sendPrompt.mutate(
+      {
+        sessionID,
+        parts,
+        model: currentModel,
+        agent: agentUsed,
+        variant: currentVariant
+      },
+      {
+        onSuccess: () => clearSubmittedPrompt(submittedPrompt, submittedAttachedFiles, submittedImageAttachments)
+      }
+    )
 
     onScrollToBottom()
 
     setStoredAgent(sessionID, agentUsed)
     if (model) {
       setStoredModel({ providerID: model.providerID, modelID: model.modelID })
     }
-    setPrompt('')
-    setAttachedFiles(new Map())
-    revokeBlobUrls(imageAttachments)
-    setImageAttachments([])
-    setSelectedAgent(null)
-    clearSTT()
   }
 
   handleSubmitRef.current = handleSubmit
@@ -1317,7 +1357,7 @@ return (
             <button
               data-submit-prompt
               onClick={hasPendingPermissionForSession ? () => setShowDialog(true) : handleSubmit}
-              disabled={hasPendingPermissionForSession ? false : ((!prompt.trim() && imageAttachments.length === 0) || disabled)}
+              disabled={hasPendingPermissionForSession ? false : ((!prompt.trim() && imageAttachments.length === 0) || disabled || isPromptSubmitPending)}
               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'
diff --git a/frontend/src/hooks/useSSE.test.tsx b/frontend/src/hooks/useSSE.test.tsx
@@ -277,6 +277,51 @@ describe('useSSE', () => {
     unmount()
   })
 
+  it('clears optimistic active status when session status reports idle', async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+      },
+    })
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    )
+
+    queryClient.setQueryData(
+      ['opencode', 'messages', 'http://localhost:5551', 'session-1', '/repo'],
+      [],
+    )
+    useSessionStatus.getState().setOptimisticActive('session-1')
+
+    const { result, unmount } = renderHook(
+      () => useSSE('http://localhost:5551', '/repo', 'session-1'),
+      { wrapper },
+    )
+
+    await waitFor(() => expect(MockEventSource.instances).toHaveLength(1))
+
+    act(() => {
+      MockEventSource.instances[0].emit('connected', { clientId: 'client-1' })
+    })
+
+    await waitFor(() => expect(result.current.isConnected).toBe(true))
+    useSessionStatus.getState().setOptimisticActive('session-1')
+
+    act(() => {
+      MockEventSource.instances[0].emit('message', {
+        type: 'session.status',
+        properties: {
+          sessionID: 'session-1',
+          status: { type: 'idle' },
+        },
+      })
+    })
+
+    expect(useSessionStatus.getState().getStatus('session-1')).toEqual({ type: 'idle' })
+
+    unmount()
+  })
+
   it('routes streamed part deltas to the event directory in multi-directory subscriptions', async () => {
     const origRAF = window.requestAnimationFrame
     window.requestAnimationFrame = ((cb: FrameRequestCallback) => {
@@ -450,4 +495,3 @@ function assistantMessage(sessionID: string, messageID: string): MessageWithPart
     parts: [],
   }
 }
-
diff --git a/frontend/src/hooks/useSSE.ts b/frontend/src/hooks/useSSE.ts
@@ -155,7 +155,7 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string
         
         const { info } = event.properties
         const sessionID = info.sessionID
-        
+
         const queryKey = messagesQueryKey(opcodeUrl, sessionID, cacheDirectory)
         const currentData = queryClient.getQueryData<MessageWithParts[]>(queryKey)
         if (!currentData) {
