fix: retract transient send error and restored prompt once server confirms send

When a long-running prompt request drops (gateway timeout or network error)
while the agent is actually working, the send error banner and the restored
prompt text were left in place. Tag send errors as 'network' and clear them
when the server confirms session activity (message.updated / session.idle),
also clearing the restored input text. Genuine server-reported session errors
(kind 'session') are preserved.

Author: chriswritescode-dev

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

@@ -366,6 +366,43 @@ describe('PromptInput STT Gesture Tests', () => {
       })
     })
 
+    it('clears the restored prompt when the send error resolves', async () => {
+      const queryClient = createTestQueryClient()
+      mocks.useSendErrorStore.mockImplementation((selector) => selector({
+        errors: {
+          'test-session': {
+            sessionID: 'test-session',
+            title: 'Connection Failed',
+            message: 'Could not connect.',
+            failedPrompt: 'recovered prompt',
+            kind: 'network',
+          },
+        },
+      }))
+
+      const { rerender } = render(
+        <QueryClientProvider client={queryClient}>
+          <PromptInput {...defaultProps} />
+        </QueryClientProvider>,
+      )
+
+      await waitFor(() => {
+        expect(screen.getByPlaceholderText('Send a message...')).toHaveValue('recovered prompt')
+      })
+
+      mocks.useSendErrorStore.mockImplementation((selector) => selector({ errors: {} }))
+
+      rerender(
+        <QueryClientProvider client={queryClient}>
+          <PromptInput {...defaultProps} />
+        </QueryClientProvider>,
+      )
+
+      await waitFor(() => {
+        expect(screen.getByPlaceholderText('Send a message...')).toHaveValue('')
+      })
+    })
+
     it('keeps stop available while active with prompt content', async () => {
       render(
         <QueryClientProvider client={createTestQueryClient()}>

frontend/src/components/message/PromptInput.tsx

@@ -239,11 +239,20 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
   const restoredFailedPromptRef = useRef<string | null>(null)
 
   useEffect(() => {
-    if (!failedPrompt || restoredFailedPromptRef.current === failedPrompt) return
-    restoredFailedPromptRef.current = failedPrompt
-    if (promptRef.current) return
-    setPrompt(failedPrompt)
-    textareaRef.current?.focus()
+    if (failedPrompt) {
+      if (restoredFailedPromptRef.current === failedPrompt) return
+      restoredFailedPromptRef.current = failedPrompt
+      if (promptRef.current) return
+      setPrompt(failedPrompt)
+      textareaRef.current?.focus()
+      return
+    }
+    if (restoredFailedPromptRef.current !== null) {
+      if (promptRef.current === restoredFailedPromptRef.current) {
+        setPrompt('')
+      }
+      restoredFailedPromptRef.current = null
+    }
   }, [failedPrompt])
 
   const mentionItems = useMemo((): MentionItem[] => {

frontend/src/hooks/useOpenCode.ts

@@ -506,6 +506,7 @@ export const useSendPrompt = (opcodeUrl: string | null | undefined, directory?:
         message: parsed.message,
         detail: error instanceof FetchError ? error.detail : undefined,
         failedPrompt: failedPrompt || undefined,
+        kind: 'network',
       });
     },
     onSuccess: async (data, variables) => {

frontend/src/hooks/useSSE.test.tsx

@@ -396,11 +396,128 @@ describe('useSSE', () => {
       title: 'Error',
       message: 'Queued send failed',
       failedPrompt: 'queued message',
+      kind: 'session',
     })
 
     unmount()
   })
 
+  it('retracts a network send error when the server confirms session activity', async () => {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    )
+
+    useSendErrorStore.getState().setError({
+      sessionID: 'session-1',
+      title: 'Connection Failed',
+      message: 'Could not connect to the server.',
+      failedPrompt: 'in-flight prompt',
+      kind: 'network',
+    })
+
+    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))
+
+    act(() => {
+      MockEventSource.instances[0].emit('message', {
+        type: 'message.updated',
+        properties: {
+          info: { id: 'assistant-1', role: 'assistant', sessionID: 'session-1', time: { created: 1 } },
+        },
+      })
+    })
+
+    expect(useSendErrorStore.getState().getError('session-1')).toBeNull()
+
+    unmount()
+  })
+
+  it('retracts a network send error when the session goes idle', async () => {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    )
+
+    useSendErrorStore.getState().setError({
+      sessionID: 'session-1',
+      title: 'Request Timeout',
+      message: 'The request took too long.',
+      kind: 'network',
+    })
+
+    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))
+
+    act(() => {
+      MockEventSource.instances[0].emit('message', {
+        type: 'session.idle',
+        properties: { sessionID: 'session-1' },
+      })
+    })
+
+    expect(useSendErrorStore.getState().getError('session-1')).toBeNull()
+
+    unmount()
+  })
+
+  it('preserves a server-reported session error when the session later goes idle', async () => {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    )
+
+    useSendErrorStore.getState().setQueuedPrompt('session-1', 'queued message')
+
+    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))
+
+    act(() => {
+      MockEventSource.instances[0].emit('message', {
+        type: 'session.error',
+        properties: {
+          sessionID: 'session-1',
+          error: { name: 'UnknownError', data: { message: 'Queued send failed' } },
+        },
+      })
+    })
+
+    act(() => {
+      MockEventSource.instances[0].emit('message', {
+        type: 'session.idle',
+        properties: { sessionID: 'session-1' },
+      })
+    })
+
+    expect(useSendErrorStore.getState().getError('session-1')).not.toBeNull()
+
+    unmount()
+  })
+
   it('does not create a send error banner once the queued prompt has been cleared', async () => {
     const queryClient = new QueryClient({
       defaultOptions: {

frontend/src/hooks/useSSE.ts

@@ -156,6 +156,7 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string
 
         const { info } = event.properties
         const sessionID = info.sessionID
+        useSendErrorStore.getState().clearNetworkError(sessionID)
         if (info.role === 'user') {
           useSendErrorStore.getState().clearQueuedPrompt(sessionID)
         }
@@ -231,6 +232,7 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string
         const { sessionID } = event.properties
 
         setSessionStatus(sessionID, { type: 'idle' })
+        useSendErrorStore.getState().clearNetworkError(sessionID)
 
         batcherRef.current?.flush({ sessionID, directory: cacheDirectory })
 

frontend/src/stores/sendErrorStore.test.ts

@@ -38,6 +38,7 @@ describe('useSendErrorStore', () => {
       title: 'Error',
       message: 'Failed',
       failedPrompt: 'queued message',
+      kind: 'session',
     })
     expect(useSendErrorStore.getState().queuedPrompts['session-1']).toBeUndefined()
   })
@@ -51,4 +52,17 @@ describe('useSendErrorStore', () => {
 
     expect(useSendErrorStore.getState().getError('session-1')).toBeNull()
   })
+
+  it('clearNetworkError retracts a network error', () => {
+    useSendErrorStore.getState().setError({ sessionID: 'session-1', title: 'Error', message: 'msg', kind: 'network' })
+    useSendErrorStore.getState().clearNetworkError('session-1')
+    expect(useSendErrorStore.getState().getError('session-1')).toBeNull()
+  })
+
+  it('clearNetworkError preserves a server-reported session error', () => {
+    useSendErrorStore.getState().setQueuedPrompt('session-1', 'queued message')
+    useSendErrorStore.getState().failQueuedPrompt({ sessionID: 'session-1', title: 'Error', message: 'Failed' })
+    useSendErrorStore.getState().clearNetworkError('session-1')
+    expect(useSendErrorStore.getState().getError('session-1')).not.toBeNull()
+  })
 })

frontend/src/stores/sendErrorStore.ts

@@ -6,6 +6,7 @@ export interface SendError {
   message: string
   detail?: string
   failedPrompt?: string
+  kind?: 'network' | 'session'
 }
 
 interface SendErrorStore {
@@ -14,8 +15,9 @@ interface SendErrorStore {
   setError: (err: SendError) => void
   setQueuedPrompt: (sessionID: string, prompt: string) => void
   clearQueuedPrompt: (sessionID: string) => void
-  failQueuedPrompt: (err: Omit<SendError, 'failedPrompt'>) => void
+  failQueuedPrompt: (err: Omit<SendError, 'failedPrompt' | 'kind'>) => void
   clearError: (sessionID: string) => void
+  clearNetworkError: (sessionID: string) => void
   getError: (sessionID: string) => SendError | null
 }
 
@@ -39,7 +41,7 @@ export const useSendErrorStore = create<SendErrorStore>((set, get) => ({
       return { queuedPrompts }
     })
   },
-  failQueuedPrompt: (err: Omit<SendError, 'failedPrompt'>) => {
+  failQueuedPrompt: (err: Omit<SendError, 'failedPrompt' | 'kind'>) => {
     set((state) => {
       const failedPrompt = state.queuedPrompts[err.sessionID]
       if (!failedPrompt) return state
@@ -48,7 +50,7 @@ export const useSendErrorStore = create<SendErrorStore>((set, get) => ({
       return {
         errors: {
           ...state.errors,
-          [err.sessionID]: { ...err, failedPrompt },
+          [err.sessionID]: { ...err, failedPrompt, kind: 'session' },
         },
         queuedPrompts,
       }
@@ -61,6 +63,10 @@ export const useSendErrorStore = create<SendErrorStore>((set, get) => ({
       return { errors: newErrors }
     })
   },
+  clearNetworkError: (sessionID: string) => {
+    if (get().errors[sessionID]?.kind === 'session') return
+    get().clearError(sessionID)
+  },
   getError: (sessionID: string) => {
     return get().errors[sessionID] || null
   },