carry: PR tiann#1419 voice direct send (resolved on f63d4bb)

Author: swear01

cli/src/claude/claudeRemote.test.ts

@@ -107,7 +107,7 @@ describe('claudeRemote async message handling', () => {
             queryMock.mockReset();
             querySpy.mockRestore();
         }
-    });
+    }, 15000);
 
     it('continues consuming assistant messages even when next user message is pending', async () => {
         const querySpy = vi.spyOn(claudeSdk, 'query').mockImplementation(queryMock as typeof claudeSdk.query);

web/src/components/AssistantChat/ComposerButtons.test.tsx

@@ -317,3 +317,230 @@ describe('ComposerButtons responsive toolbar', () => {
         expect(getComposerToolbarJustifyContent('split')).toBe('flex-start')
     })
 })
+
+describe('UnifiedButton — voice active state', () => {
+    afterEach(() => {
+        cleanup()
+    })
+
+    it('preserves React hook order when re-rendering across disconnected, connecting, and connected states', () => {
+        const onVoiceToggle = vi.fn()
+        const onSend = vi.fn()
+        const { rerender } = renderInProviders(
+            <UnifiedButton
+                canSend={false}
+                voiceStatus="disconnected"
+                voiceEnabled
+                dictationEnabled
+                controlsDisabled={false}
+                onSend={onSend}
+                onVoiceToggle={onVoiceToggle}
+            />,
+        )
+
+        expect(() => {
+            rerender(
+                <I18nProvider>
+                    <UnifiedButton
+                        canSend={false}
+                        voiceStatus="connecting"
+                        voiceEnabled
+                        dictationEnabled
+                        controlsDisabled={false}
+                        onSend={onSend}
+                        onVoiceToggle={onVoiceToggle}
+                    />
+                </I18nProvider>,
+            )
+            rerender(
+                <I18nProvider>
+                    <UnifiedButton
+                        canSend={false}
+                        voiceStatus="connected"
+                        voiceEnabled
+                        dictationEnabled
+                        controlsDisabled={false}
+                        onSend={onSend}
+                        onVoiceToggle={onVoiceToggle}
+                    />
+                </I18nProvider>,
+            )
+            rerender(
+                <I18nProvider>
+                    <UnifiedButton
+                        canSend={false}
+                        voiceStatus="disconnected"
+                        voiceEnabled
+                        dictationEnabled
+                        controlsDisabled={false}
+                        onSend={onSend}
+                        onVoiceToggle={onVoiceToggle}
+                    />
+                </I18nProvider>,
+            )
+        }).not.toThrow()
+    })
+
+    it('renders ONLY Stop button when in voice assistant mode (dictationEnabled is false)', () => {
+        const onVoiceToggle = vi.fn()
+        const onSend = vi.fn()
+        renderInProviders(
+            <UnifiedButton
+                canSend={false}
+                voiceStatus="connected"
+                voiceEnabled
+                dictationEnabled={false}
+                controlsDisabled={false}
+                onSend={onSend}
+                onVoiceToggle={onVoiceToggle}
+            />,
+        )
+
+        const stopBtn = screen.getByRole('button', { name: 'Stop' })
+        const sendBtn = screen.queryByRole('button', { name: 'Send' })
+        expect(stopBtn).toBeInTheDocument()
+        expect(sendBtn).toBeNull()
+    })
+
+    it('renders ONLY Stop button during connecting status even when dictationEnabled is true', () => {
+        const onVoiceToggle = vi.fn()
+        const onSend = vi.fn()
+        renderInProviders(
+            <UnifiedButton
+                canSend={false}
+                voiceStatus="connecting"
+                voiceEnabled
+                dictationEnabled
+                controlsDisabled={false}
+                onSend={onSend}
+                onVoiceToggle={onVoiceToggle}
+            />,
+        )
+
+        const stopBtn = screen.getByRole('button', { name: /connecting/i })
+        const sendBtn = screen.queryByRole('button', { name: 'Send' })
+        expect(stopBtn).toBeInTheDocument()
+        expect(sendBtn).toBeNull()
+    })
+
+    it('renders both Stop and Send buttons in dictation mode (dictationEnabled is true)', () => {
+        const onVoiceToggle = vi.fn()
+        const onSend = vi.fn()
+        renderInProviders(
+            <UnifiedButton
+                canSend={false}
+                voiceStatus="connected"
+                voiceEnabled
+                dictationEnabled
+                controlsDisabled={false}
+                onSend={onSend}
+                onVoiceToggle={onVoiceToggle}
+            />,
+        )
+
+        const stopBtn = screen.getByRole('button', { name: 'Stop' })
+        const sendBtn = screen.getByRole('button', { name: 'Send' })
+        expect(stopBtn).toBeInTheDocument()
+        expect(sendBtn).toBeInTheDocument()
+    })
+
+    it('clicking Stop button calls onVoiceToggle without calling onSend', () => {
+        const onVoiceToggle = vi.fn()
+        const onSend = vi.fn()
+        renderInProviders(
+            <UnifiedButton
+                canSend={false}
+                voiceStatus="connected"
+                voiceEnabled
+                dictationEnabled
+                controlsDisabled={false}
+                onSend={onSend}
+                onVoiceToggle={onVoiceToggle}
+            />,
+        )
+
+        const stopBtn = screen.getByRole('button', { name: 'Stop' })
+        fireEvent.click(stopBtn)
+        expect(onVoiceToggle).toHaveBeenCalledOnce()
+        expect(onSend).not.toHaveBeenCalled()
+    })
+
+    it('clicking Send button during active dictation calls onVoiceToggle and onSend', async () => {
+        const onVoiceToggle = vi.fn(async () => true)
+        const onSend = vi.fn()
+        renderInProviders(
+            <UnifiedButton
+                canSend={false}
+                voiceStatus="connected"
+                voiceEnabled
+                dictationEnabled
+                controlsDisabled={false}
+                onSend={onSend}
+                onVoiceToggle={onVoiceToggle}
+            />,
+        )
+
+        const sendBtn = screen.getByRole('button', { name: 'Send' })
+        await act(async () => {
+            fireEvent.click(sendBtn)
+        })
+        expect(onVoiceToggle).toHaveBeenCalledOnce()
+        expect(onSend).toHaveBeenCalledOnce()
+        expect(onSend).toHaveBeenCalledWith('default')
+    })
+
+    it('does not call onSend if onVoiceToggle returns false (transcription failure / no audio)', async () => {
+        const onVoiceToggle = vi.fn(async () => false)
+        const onSend = vi.fn()
+        renderInProviders(
+            <UnifiedButton
+                canSend={false}
+                voiceStatus="connected"
+                voiceEnabled
+                dictationEnabled
+                controlsDisabled={false}
+                onSend={onSend}
+                onVoiceToggle={onVoiceToggle}
+            />,
+        )
+
+        const sendBtn = screen.getByRole('button', { name: 'Send' })
+        await act(async () => {
+            fireEvent.click(sendBtn)
+        })
+        expect(onVoiceToggle).toHaveBeenCalledOnce()
+        expect(onSend).not.toHaveBeenCalled()
+    })
+
+    it('prevents double-tap reentrancy while voice send is pending', async () => {
+        let resolveVoiceToggle!: (res: boolean) => void
+        const onVoiceToggle = vi.fn(() => new Promise<boolean>((resolve) => {
+            resolveVoiceToggle = resolve
+        }))
+        const onSend = vi.fn()
+        renderInProviders(
+            <UnifiedButton
+                canSend={false}
+                voiceStatus="connected"
+                voiceEnabled
+                dictationEnabled
+                controlsDisabled={false}
+                onSend={onSend}
+                onVoiceToggle={onVoiceToggle}
+            />,
+        )
+
+        const sendBtn = screen.getByRole('button', { name: 'Send' })
+        fireEvent.click(sendBtn)
+        fireEvent.click(sendBtn) // second click while in flight
+        expect(onVoiceToggle).toHaveBeenCalledOnce()
+        expect(onSend).not.toHaveBeenCalled()
+
+        await act(async () => {
+            resolveVoiceToggle(true)
+        })
+        expect(onSend).toHaveBeenCalledOnce()
+    })
+})
+
+

web/src/components/AssistantChat/ComposerButtons.tsx

@@ -1,5 +1,5 @@
 import { ComposerPrimitive } from '@assistant-ui/react'
-import { Children, isValidElement, useCallback, useLayoutEffect, useRef, useState, type ReactElement, type ReactNode, type Ref } from 'react'
+import { Children, isValidElement, useCallback, useLayoutEffect, useEffect, useRef, useState, type ReactElement, type ReactNode, type Ref } from 'react'
 import type { CodexUsage } from '@hapi/protocol/types'
 import type { ConversationStatus } from '@/realtime/types'
 import { useTranslation } from '@/lib/use-translation'
@@ -477,9 +477,11 @@ export function UnifiedButton(props: {
     canSend: boolean
     voiceStatus: ConversationStatus
     voiceEnabled: boolean
+    dictationEnabled?: boolean
     controlsDisabled: boolean
     onSend: (intent?: ComposerSendIntent) => void
-    onVoiceToggle: () => void
+    onVoiceToggle: () => void | boolean | Promise<void | boolean>
+    onVoiceSend?: () => void | Promise<void>
     voiceLabel?: string
     /**
      * When true, the send button repaints amber and the aria-label
@@ -497,17 +499,24 @@ export function UnifiedButton(props: {
     allowQueueGesture?: boolean
 }) {
     const { t } = useTranslation()
+    const voiceSendPendingRef = useRef(false)
+    const [voiceSendRequested, setVoiceSendRequested] = useState(false)
+
+    useEffect(() => {
+        if (!voiceSendRequested) return
+        setVoiceSendRequested(false)
+        props.onSend('default')
+    }, [voiceSendRequested, props.onSend])
 
     const isConnecting = props.voiceStatus === 'connecting'
     const isConnected = props.voiceStatus === 'connected'
     const isVoiceActive = isConnecting || isConnected
     const hasText = props.canSend
     const routesToScratchlist = props.routesToScratchlist ?? false
+    const isDictation = props.dictationEnabled ?? false
 
     const handleClick = () => {
-        if (isVoiceActive) {
-            props.onVoiceToggle() // Stop voice
-        } else if (hasText) {
+        if (hasText) {
             props.onSend('default') // Send message (or scratchlist add — wrapper decides)
         } else if (props.voiceEnabled && !routesToScratchlist) {
             props.onVoiceToggle() // Start voice (suppressed in scratchlist mode)
@@ -533,19 +542,64 @@ export function UnifiedButton(props: {
         disabled: props.controlsDisabled,
     })
 
+    if (isVoiceActive) {
+        const stopIcon = isConnecting ? <LoadingIcon /> : <StopIcon />
+        const stopAriaLabel = isConnecting ? t('voice.connecting') : t('composer.stop')
+        const sendAriaLabel = routesToScratchlist ? t('scratchlist.sendToScratchlist') : t('composer.send')
+        const sendClassName = routesToScratchlist
+            ? 'bg-amber-500 text-white hover:bg-amber-600'
+            : 'bg-black text-white'
+
+        const handleVoiceSendClick = async () => {
+            if (voiceSendPendingRef.current) return
+            voiceSendPendingRef.current = true
+            try {
+                if (props.onVoiceSend) {
+                    await props.onVoiceSend()
+                } else {
+                    const committed = await props.onVoiceToggle()
+                    if (committed === true) {
+                        setVoiceSendRequested(true)
+                    }
+                }
+            } finally {
+                voiceSendPendingRef.current = false
+            }
+        }
+
+        return (
+            <div className="flex items-center gap-1">
+                <button
+                    type="button"
+                    onClick={props.onVoiceToggle}
+                    disabled={props.controlsDisabled}
+                    aria-label={stopAriaLabel}
+                    title={stopAriaLabel}
+                    className="ml-1 flex h-8 w-8 items-center justify-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-50 bg-black text-white"
+                >
+                    {stopIcon}
+                </button>
+                {isDictation && isConnected ? (
+                    <button
+                        type="button"
+                        onClick={handleVoiceSendClick}
+                        disabled={props.controlsDisabled}
+                        aria-label={sendAriaLabel}
+                        title={sendAriaLabel}
+                        className={`ml-1 flex h-8 w-8 items-center justify-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${sendClassName}`}
+                    >
+                        <SendIcon />
+                    </button>
+                ) : null}
+            </div>
+        )
+    }
+
     let icon: React.ReactNode
     let className: string
     let ariaLabel: string
 
-    if (isConnecting) {
-        icon = <LoadingIcon />
-        className = 'bg-black text-white'
-        ariaLabel = t('voice.connecting')
-    } else if (isConnected) {
-        icon = <StopIcon />
-        className = 'bg-black text-white'
-        ariaLabel = t('composer.stop')
-    } else if (routesToScratchlist) {
+    if (routesToScratchlist) {
         // Amber send button - matches the scratchlist drawer accent.
         // Single visual signal carries the "this goes to the scratchlist"
         // contract; without it, the modal state is invisible to the user.
@@ -574,7 +628,7 @@ export function UnifiedButton(props: {
     const isDisabled = props.controlsDisabled || (
         routesToScratchlist
             ? !hasText
-            : !hasText && !props.voiceEnabled && !isVoiceActive
+            : !hasText && !props.voiceEnabled
     )
 
     return (
@@ -652,6 +706,7 @@ export function ComposerButtons(props: {
     voiceStatus: ConversationStatus
     voiceMicMuted?: boolean
     onVoiceToggle: () => void
+    onVoiceSend?: () => void | Promise<void>
     onVoiceMicToggle?: () => void
     onSend: (intent?: ComposerSendIntent) => void
     pendingSchedule?: PendingSchedule | null
@@ -918,9 +973,11 @@ export function ComposerButtons(props: {
                     canSend={props.canSend}
                     voiceStatus={props.voiceStatus}
                     voiceEnabled={props.voiceEnabled}
+                    dictationEnabled={props.dictationEnabled}
                     controlsDisabled={props.controlsDisabled}
                     onSend={props.onSend}
                     onVoiceToggle={props.onVoiceToggle}
+                    onVoiceSend={props.onVoiceSend}
                     voiceLabel={props.dictationEnabled ? t('composer.dictate') : undefined}
                     /*
                      * Derived, NOT raw scratchlistMode. Mirror SessionChat's