test: add MessageThread tests for optimistic editing state and resend flow

Author: chriswritescode-dev

frontend/src/components/message/EditableUserMessage.tsx

@@ -88,7 +88,6 @@ export const EditableUserMessage = memo(function EditableUserMessage({
         onChange={(e) => setEditedContent(e.target.value)}
         onKeyDown={handleKeyDown}
         onFocus={() => setIsEditingMessage(true)}
-        onBlur={() => setIsEditingMessage(false)}
         className="w-full p-3 rounded-lg bg-background border border-primary/50 focus:border-primary focus:ring-1 focus:ring-primary outline-none resize-none min-h-[60px] text-[16px] md:text-sm"
         placeholder="Edit your message..."
         disabled={refreshMessage.isPending}
@@ -158,4 +157,4 @@ export const ClickableUserMessage = memo(function ClickableUserMessage({
       <Pencil className={`w-4 h-4 flex-shrink-0 mt-0.5 text-muted-foreground transition-all ${isMobile ? 'opacity-100' : 'opacity-50 group-hover/edit:opacity-100 group-hover/edit:text-primary'}`} />
     </button>
   )
-})
+})

frontend/src/components/message/MessageThread.test.tsx

@@ -1,13 +1,16 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { MessageThread } from './MessageThread'
+import { useUIState } from '@/stores/uiStateStore'
 
 const mocks = vi.hoisted(() => ({
   useSessionStatus: vi.fn(),
   useSessionTodos: vi.fn(),
   useSettings: vi.fn(),
   usePermissions: vi.fn(),
   useQuestions: vi.fn(),
+  useRefreshMessage: vi.fn(),
+  useSessionAgent: vi.fn(),
 }))
 
 vi.mock('@/stores/sessionStatusStore', () => ({
@@ -27,6 +30,14 @@ vi.mock('@/contexts/EventContext', () => ({
   useQuestions: () => mocks.useQuestions(),
 }))
 
+vi.mock('@/hooks/useRemoveMessage', () => ({
+  useRefreshMessage: () => mocks.useRefreshMessage(),
+}))
+
+vi.mock('@/hooks/useSessionAgent', () => ({
+  useSessionAgent: () => mocks.useSessionAgent(),
+}))
+
 interface MockSettingsReturn {
   preferences: {
     simpleChatMode: boolean
@@ -147,6 +158,12 @@ describe('MessageThread', () => {
     mocks.useQuestions.mockReturnValue({
       getForCallID: vi.fn(() => null),
     })
+    mocks.useRefreshMessage.mockReturnValue({
+      isPending: false,
+      mutate: vi.fn(),
+    })
+    mocks.useSessionAgent.mockReturnValue({ agent: 'test-agent' })
+    useUIState.getState().setIsEditingMessage(false)
   })
 
   it('renders assistant message with only subtask part as standalone row without header', () => {
@@ -397,4 +414,74 @@ describe('MessageThread', () => {
     expect(screen.getByText('Hello')).toBeInTheDocument()
     expect(screen.getByText('You')).toBeInTheDocument()
   })
+
+  it('keeps global editing state active when edit textarea blurs', () => {
+    setupSettings({
+      simpleChatMode: false,
+      showReasoning: false,
+    })
+
+    const messages = [
+      createUserMessage('1', 'Hello'),
+      createAssistantMessage('2', [createTextPart('This is a response', '2')]),
+    ]
+
+    const { unmount } = render(
+      <MessageThread
+        opcodeUrl="http://localhost:5551"
+        sessionID="test-session"
+        messages={messages as any}
+      />
+    )
+
+    fireEvent.click(screen.getByTitle('Edit message'))
+    const textarea = screen.getByPlaceholderText('Edit your message...')
+    fireEvent.focus(textarea)
+    expect(useUIState.getState().isEditingMessage).toBe(true)
+
+    fireEvent.blur(textarea)
+    expect(useUIState.getState().isEditingMessage).toBe(true)
+
+    unmount()
+    expect(useUIState.getState().isEditingMessage).toBe(false)
+  })
+
+  it('resends an edited prompt after the edit textarea blurs', () => {
+    setupSettings({
+      simpleChatMode: false,
+      showReasoning: false,
+    })
+    const mutate = vi.fn()
+    mocks.useRefreshMessage.mockReturnValue({
+      isPending: false,
+      mutate,
+    })
+
+    const messages = [
+      createUserMessage('1', 'Hello'),
+      createAssistantMessage('2', [createTextPart('This is a response', '2')]),
+    ]
+
+    render(
+      <MessageThread
+        opcodeUrl="http://localhost:5551"
+        sessionID="test-session"
+        messages={messages as any}
+      />
+    )
+
+    fireEvent.click(screen.getByTitle('Edit message'))
+    const textarea = screen.getByPlaceholderText('Edit your message...')
+    fireEvent.change(textarea, { target: { value: 'Updated prompt' } })
+    fireEvent.blur(textarea)
+    fireEvent.click(screen.getByRole('button', { name: /resend/i }))
+
+    expect(mutate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        assistantMessageID: '2',
+        userMessageContent: 'Updated prompt',
+      }),
+      expect.any(Object),
+    )
+  })
 })