diff --git a/frontend/src/components/agent/AgentQuickSelect.tsx b/frontend/src/components/agent/AgentQuickSelect.tsx
index e10f8d635..56f38aacc 100644
--- a/frontend/src/components/agent/AgentQuickSelect.tsx
+++ b/frontend/src/components/agent/AgentQuickSelect.tsx
@@ -55,7 +55,7 @@ export function AgentQuickSelect({
   const buttonContent = (
     <button
       style={styleVars as React.CSSProperties}
-      className="px-2 md:px-3.5 py-1 h-10 md:h-9 rounded-lg text-sm font-medium border min-w-[56px] max-w-[80px] md:max-w-[100px] flex-shrink-0 flex items-center justify-center transition-all duration-200 active:scale-95 hover:scale-105 shadow-md text-[var(--agent-color)] bg-[var(--agent-bg)] border-[var(--agent-border)] hover:bg-[var(--agent-bg-hover)] hover:border-[var(--agent-border-hover)] shadow-[var(--agent-shadow)] hover:shadow-[var(--agent-shadow-hover)]"
+      className="px-2 md:px-3.5 py-1 h-11 md:h-9 rounded-lg text-sm font-medium border min-w-[56px] max-w-[80px] md:max-w-[100px] flex-shrink-0 flex items-center justify-center transition-all duration-200 active:scale-95 hover:scale-105 shadow-md text-[var(--agent-color)] bg-[var(--agent-bg)] border-[var(--agent-border)] hover:bg-[var(--agent-bg-hover)] hover:border-[var(--agent-border-hover)] shadow-[var(--agent-shadow)] hover:shadow-[var(--agent-shadow-hover)]"
     >
       <span className="truncate">{displayName}</span>
     </button>
diff --git a/frontend/src/components/message/ComposerToolsMenu.test.tsx b/frontend/src/components/message/ComposerToolsMenu.test.tsx
index c9cfc6de1..02e754978 100644
--- a/frontend/src/components/message/ComposerToolsMenu.test.tsx
+++ b/frontend/src/components/message/ComposerToolsMenu.test.tsx
@@ -249,12 +249,12 @@ describe('ComposerToolsMenu', () => {
     expect(props.onAttachFile).toHaveBeenCalledTimes(1)
   })
 
-  it('uses the 40px control size for the trigger', () => {
+  it('uses the 44px control size for the trigger', () => {
     mockPermissionMode()
     renderMenu()
 
     const trigger = screen.getByRole('button', { name: 'Composer options' })
-    expect(trigger).toHaveClass('size-10', 'p-0')
+    expect(trigger).toHaveClass('size-11', 'p-0')
     expect(trigger).not.toHaveClass('p-2')
   })
 })
diff --git a/frontend/src/components/message/ComposerToolsMenu.tsx b/frontend/src/components/message/ComposerToolsMenu.tsx
index a8609e233..679004dda 100644
--- a/frontend/src/components/message/ComposerToolsMenu.tsx
+++ b/frontend/src/components/message/ComposerToolsMenu.tsx
@@ -56,7 +56,7 @@ export function ComposerToolsMenu({
             type="button"
             aria-label="Composer options"
             title="Composer options"
-            className={cn(getIconToggleButtonClassName(permission.isAuto || sandbox.isSandboxed || goalArmed), 'flex items-center justify-center size-10 p-0')}
+            className={cn(getIconToggleButtonClassName(permission.isAuto || sandbox.isSandboxed || goalArmed), 'flex items-center justify-center size-11 p-0')}
           >
             <Plus className="w-5 h-5" />
           </button>
diff --git a/frontend/src/components/message/PromptInput.composer.test.tsx b/frontend/src/components/message/PromptInput.composer.test.tsx
index 0817021f5..6185eed5e 100644
--- a/frontend/src/components/message/PromptInput.composer.test.tsx
+++ b/frontend/src/components/message/PromptInput.composer.test.tsx
@@ -291,7 +291,7 @@ describe('PromptInput composer layout', () => {
       renderComponent({ showScrollButton: true, onScrollToBottom })
 
       const arrow = screen.getByRole('button', { name: 'Scroll to bottom' })
-      expect(arrow).toHaveClass('size-10', 'p-0')
+      expect(arrow).toHaveClass('size-11', 'p-0')
 
       fireEvent.click(arrow)
 
@@ -359,18 +359,18 @@ describe('PromptInput composer layout', () => {
   })
 
   describe('control sizing', () => {
-    it('keeps the mic at 40px before and after the prompt gains focus on mobile', () => {
+    it('keeps the mic at 44px before and after the prompt gains focus on mobile', () => {
       mocks.useMobile.mockReturnValue(true)
       renderComponent()
 
       const micBeforeFocus = mobileVoiceButton() as HTMLElement
-      expect(micBeforeFocus).toHaveClass('min-h-10', 'min-w-10')
+      expect(micBeforeFocus).toHaveClass('min-h-11', 'min-w-11')
       expect(micBeforeFocus).not.toHaveClass('min-h-[44px]')
 
       fireEvent.focus(promptInput())
 
       const micAfterFocus = mobileVoiceButton() as HTMLElement
-      expect(micAfterFocus).toHaveClass('min-h-10', 'min-w-10')
+      expect(micAfterFocus).toHaveClass('min-h-11', 'min-w-11')
       expect(micAfterFocus).not.toHaveClass('min-h-[44px]')
     })
 
diff --git a/frontend/src/components/message/PromptInput.stt.test.tsx b/frontend/src/components/message/PromptInput.stt.test.tsx
index ce6fbcd4d..00c1c63dc 100644
--- a/frontend/src/components/message/PromptInput.stt.test.tsx
+++ b/frontend/src/components/message/PromptInput.stt.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, fireEvent, act, waitFor } from '@testing-library/react'
+import { render, screen, fireEvent, act, waitFor, within } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { PromptInput } from './PromptInput'
 import { createCommandActionsMock } from '@/test/test-utils'
@@ -466,7 +466,7 @@ describe('PromptInput STT Gesture Tests', () => {
       })
     })
 
-    it('pointer down while recording sets up swipe gesture', async () => {
+    it('pointer down while recording starts a drag gesture', async () => {
       renderComponent({ isRecording: true })
 
       const container = getMobileVoiceButtonContainer()
@@ -588,4 +588,190 @@ describe('PromptInput STT Gesture Tests', () => {
       expect(queryMobileVoiceButton()).not.toBeNull()
     })
   })
+
+  describe('in-row mobile voice recorder', () => {
+    const renderRecorder = (sttOverrides: Partial<MockSTTReturn> = {}) => {
+      const queryClient = createTestQueryClient()
+      const buildTree = (overrides: Partial<MockSTTReturn>) => {
+        mocks.useSTT.mockReturnValue({
+          isRecording: false,
+          isProcessing: false,
+          isSupported: true,
+          isEnabled: true,
+          interimTranscript: '',
+          transcript: '',
+          startRecording: mockStartRecording,
+          stopRecording: mockStopRecording,
+          abortRecording: mockAbortRecording,
+          reset: mockReset,
+          clear: mockClear,
+          ...overrides,
+        } as unknown as MockSTTReturn)
+        return (
+          <QueryClientProvider client={queryClient}>
+            <PromptInput {...defaultProps} onPromptChange={(hasContent) => defaultProps.onPromptChange(hasContent)} />
+          </QueryClientProvider>
+        )
+      }
+
+      const view = render(buildTree(sttOverrides))
+      return { rerender: (overrides: Partial<MockSTTReturn>) => view.rerender(buildTree(overrides)) }
+    }
+
+    const getControlsRow = () => screen.getByTestId('composer-controls-row')
+
+    it('swaps the controls row for discard, strip, mic and send while recording', () => {
+      renderComponent({ isRecording: true })
+
+      const row = getControlsRow()
+
+      expect(within(row).getByRole('button', { name: 'Discard recording' })).toBeInTheDocument()
+      expect(within(row).getByRole('button', { name: 'Send recording' })).toBeInTheDocument()
+      expect(within(row).getByText('0:00')).toBeInTheDocument()
+      expect(within(row).getByRole('status')).toHaveTextContent('‹ discard · send ›')
+    })
+
+    it('hides the mobile insert keys and renders nothing above the mic', () => {
+      renderComponent({ isRecording: true })
+
+      fireEvent.focus(screen.getByPlaceholderText('Send a message...'))
+
+      expect(screen.queryByRole('toolbar', { name: 'Insert' })).not.toBeInTheDocument()
+      expect(getMobileVoiceButtonContainer().children).toHaveLength(1)
+    })
+
+    it('stops recording and marks the transcript for auto-send when send is tapped', async () => {
+      const view = renderRecorder({ isRecording: true })
+
+      fireEvent.click(screen.getByRole('button', { name: 'Send recording' }))
+
+      expect(mockStopRecording).toHaveBeenCalledTimes(1)
+
+      view.rerender({ isRecording: false, isProcessing: true })
+
+      expect(screen.getByText('Transcribing & sending…')).toBeInTheDocument()
+
+      view.rerender({ isRecording: false, isProcessing: false, transcript: 'hello there' })
+
+      await waitFor(() => {
+        const [variables] = mocks.useSendPromptMutate.mock.calls[0] as [{ text: string }]
+        expect(variables.text).toBe('hello there')
+      })
+    })
+
+    it('upgrades a transcription in progress to send when send is tapped', async () => {
+      const view = renderRecorder({ isRecording: false, isProcessing: true })
+
+      expect(screen.getByText('Transcribing…')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByRole('button', { name: 'Send recording' }))
+
+      expect(mockStopRecording).not.toHaveBeenCalled()
+
+      view.rerender({ isRecording: false, isProcessing: false, transcript: 'upgraded text' })
+
+      await waitFor(() => {
+        const [variables] = mocks.useSendPromptMutate.mock.calls[0] as [{ text: string }]
+        expect(variables.text).toBe('upgraded text')
+      })
+    })
+
+    it('aborts recording when discard is tapped', () => {
+      renderComponent({ isRecording: true })
+      mockAbortRecording.mockClear()
+
+      const discardButton = screen.getByRole('button', { name: 'Discard recording' })
+
+      fireEvent.pointerDown(discardButton)
+      fireEvent.click(discardButton)
+
+      expect(mockAbortRecording).toHaveBeenCalledTimes(1)
+      expect(mockStopRecording).not.toHaveBeenCalled()
+    })
+
+    it('arms send on a right drag and sends on release', async () => {
+      renderComponent({ isRecording: true })
+
+      const container = getMobileVoiceButtonContainer()
+
+      await act(async () => {
+        fireEvent.pointerDown(container, { clientX: 100 })
+        fireEvent.pointerMove(container, { clientX: 130 })
+      })
+
+      expect(screen.getByText('Release to send')).toBeInTheDocument()
+      expect(mockStopRecording).not.toHaveBeenCalled()
+
+      await act(async () => {
+        fireEvent.pointerUp(container, { clientX: 130 })
+      })
+
+      expect(mockStopRecording).toHaveBeenCalledTimes(1)
+    })
+
+    it('arms discard on a left drag past the threshold and aborts on release', async () => {
+      renderComponent({ isRecording: true })
+      mockAbortRecording.mockClear()
+
+      const container = getMobileVoiceButtonContainer()
+
+      await act(async () => {
+        fireEvent.pointerDown(container, { clientX: 200 })
+        fireEvent.pointerMove(container, { clientX: 100 })
+      })
+
+      expect(screen.getByText('Release to discard')).toBeInTheDocument()
+
+      await act(async () => {
+        fireEvent.pointerUp(container, { clientX: 100 })
+      })
+
+      expect(mockAbortRecording).toHaveBeenCalledTimes(1)
+      expect(mockStopRecording).not.toHaveBeenCalled()
+    })
+
+    it('does not restart recording when the mic is tapped right after a drag-to-discard release', async () => {
+      const view = renderRecorder({ isRecording: true })
+      mockAbortRecording.mockClear()
+      mockStartRecording.mockClear()
+
+      const container = getMobileVoiceButtonContainer()
+
+      await act(async () => {
+        fireEvent.pointerDown(container, { clientX: 200 })
+        fireEvent.pointerMove(container, { clientX: 100 })
+      })
+
+      expect(screen.getByText('Release to discard')).toBeInTheDocument()
+
+      await act(async () => {
+        fireEvent.pointerUp(container, { clientX: 100 })
+      })
+
+      expect(mockAbortRecording).toHaveBeenCalledTimes(1)
+
+      view.rerender({ isRecording: false })
+
+      expect(screen.queryByRole('button', { name: 'Discard recording' })).not.toBeInTheDocument()
+
+      await act(async () => {
+        fireEvent.click(getMobileVoiceButton())
+        await new Promise(resolve => setTimeout(resolve, 10))
+      })
+
+      expect(mockStartRecording).not.toHaveBeenCalled()
+      expect(screen.queryByRole('button', { name: 'Discard recording' })).not.toBeInTheDocument()
+    })
+
+    it('leaves the desktop composer without the recorder row', () => {
+      mocks.useMobile.mockReturnValue(false)
+
+      renderComponent({ isRecording: true })
+
+      expect(screen.queryByRole('button', { name: 'Discard recording' })).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'Send recording' })).not.toBeInTheDocument()
+      expect(screen.queryByText('Release to send')).not.toBeInTheDocument()
+      expect(document.querySelector('[data-voice-variant="desktop"]')).not.toBeNull()
+    })
+  })
 })
diff --git a/frontend/src/components/message/PromptInput.tsx b/frontend/src/components/message/PromptInput.tsx
index df0be4e56..9359eca09 100644
--- a/frontend/src/components/message/PromptInput.tsx
+++ b/frontend/src/components/message/PromptInput.tsx
@@ -19,7 +19,7 @@ import { FINE_POINTER_MEDIA_QUERY, useMediaQuery } from '@/hooks/useMediaQuery'
 
 import { usePermissions } from '@/contexts/EventContext'
 import { isLocalOpenCodeServer, useOpenCodeServerId } from '@/contexts/OpenCodeServerContext'
-import { ArrowDown, Upload, X, Mic, MicOff, Target } from 'lucide-react'
+import { ArrowDown, ArrowUp, Upload, X, Mic, MicOff, Target } from 'lucide-react'
 
 import { SquareFill } from '@/components/ui/square-fill'
 import { IconToggleButton, getIconToggleButtonClassName } from '@/components/ui/icon-toggle-button'
@@ -28,7 +28,7 @@ import { PromptSuggestions, type PromptSuggestion } from './PromptSuggestions'
 import { ComposerActivityBar } from './ComposerActivityBar'
 import { ModelQuickSelect } from '@/components/model/ModelQuickSelect'
 import { AgentQuickSelect } from '@/components/agent/AgentQuickSelect'
-import { VoiceStatusOverlay, type VoiceStatusOverlayState } from './VoiceStatusOverlay'
+import { VoiceRecorderStrip, type VoiceRecorderStripState } from './VoiceRecorderStrip'
 import { PermissionModeToggle } from '@/components/session/PermissionModeToggle'
 import { SessionSandboxMenu } from '@/components/session/SessionSandboxMenu'
 import { ComposerToolsMenu } from './ComposerToolsMenu'
@@ -104,8 +104,11 @@ const COMPOSER_MODE_STYLES: Record<ComposerMode, { label: string, frame: string,
 const shiftRanges = (ranges: MatchRange[], offset: number): MatchRange[] =>
   ranges.map(([start, end]) => [start + offset, end + offset])
 
-const VOICE_SEND_SWIPE_ARM_THRESHOLD = 24
-const VOICE_SEND_SWIPE_DISARM_THRESHOLD = 8
+const VOICE_SEND_DRAG_ARM_THRESHOLD = 24
+const VOICE_SEND_DRAG_DISARM_THRESHOLD = 8
+const VOICE_CANCEL_DRAG_ARM_THRESHOLD = 96
+const VOICE_CANCEL_DRAG_DISARM_THRESHOLD = VOICE_CANCEL_DRAG_ARM_THRESHOLD - 8
+const VOICE_CLICK_SUPPRESSION_MS = 400
 type VoiceButtonVariant = 'desktop' | 'mobile'
 
 
@@ -156,15 +159,18 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
   const [selectedCommandIndex, setSelectedCommandIndex] = useState(0)
   const [localMode, setLocalMode] = useState<string | null>(null)
   const [isTogglingRecording, setIsTogglingRecording] = useState(false)
-  const [isVoiceSwipeArmed, setIsVoiceSwipeArmed] = useState(false)
+  const [isVoiceSendArmed, setIsVoiceSendArmed] = useState(false)
+  const [isVoiceCancelArmed, setIsVoiceCancelArmed] = useState(false)
   const [isVoiceAutoSendPending, setIsVoiceAutoSendPending] = useState(false)
   const [isVoiceAutoSendWaitingForTranscript, setIsVoiceAutoSendWaitingForTranscript] = useState(false)
+  const [voiceRecordingStartedAt, setVoiceRecordingStartedAt] = useState<number | null>(null)
   const [isPromptFocused, setIsPromptFocused] = useState(false)
   const promptBlurTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const pendingCommandSubmitRef = useRef(false)
   const lastAddedTranscriptRef = useRef('')
-  const voiceGestureStartYRef = useRef<number | null>(null)
-  const voiceSwipeArmedRef = useRef(false)
+  const voiceGestureStartXRef = useRef<number | null>(null)
+  const voiceSendArmedRef = useRef(false)
+  const voiceCancelArmedRef = useRef(false)
   const pendingVoiceAutoSubmitRef = useRef(false)
   const ignoreVoiceClickUntilRef = useRef(0)
   const voiceStartRequestRef = useRef(0)
@@ -189,7 +195,9 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
   const voiceButtonContainerRef = useRef<HTMLDivElement | null>(null)
+  const composerControlsRowRef = useRef<HTMLDivElement | null>(null)
   const hasFinePointer = useMediaQuery(FINE_POINTER_MEDIA_QUERY)
+  const isMobile = useMobile()
 
   useEffect(() => {
     if (!hasFinePointer) return
@@ -199,11 +207,13 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
   }, [hasFinePointer, sessionID])
 
   const resetVoiceGestureState = useCallback(() => {
-    voiceGestureStartYRef.current = null
-    voiceSwipeArmedRef.current = false
+    voiceGestureStartXRef.current = null
+    voiceSendArmedRef.current = false
+    voiceCancelArmedRef.current = false
     pendingVoiceAutoSubmitRef.current = false
     ignoreVoiceClickUntilRef.current = 0
-    setIsVoiceSwipeArmed(false)
+    setIsVoiceSendArmed(false)
+    setIsVoiceCancelArmed(false)
     setIsVoiceAutoSendPending(false)
     setIsVoiceAutoSendWaitingForTranscript(false)
   }, [])
@@ -617,8 +627,10 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
     pendingVoiceAutoSubmitRef.current = false
     setIsVoiceAutoSendPending(false)
     setIsVoiceAutoSendWaitingForTranscript(false)
-    setIsVoiceSwipeArmed(false)
-    voiceSwipeArmedRef.current = false
+    setIsVoiceSendArmed(false)
+    voiceSendArmedRef.current = false
+    setIsVoiceCancelArmed(false)
+    voiceCancelArmedRef.current = false
     setIsTogglingRecording(true)
 
     const started = await startRecording()
@@ -650,8 +662,10 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
       pendingVoiceAutoSubmitRef.current = false
       setIsVoiceAutoSendPending(false)
       setIsVoiceAutoSendWaitingForTranscript(false)
-      setIsVoiceSwipeArmed(false)
-      voiceSwipeArmedRef.current = false
+      setIsVoiceSendArmed(false)
+      voiceSendArmedRef.current = false
+      setIsVoiceCancelArmed(false)
+      voiceCancelArmedRef.current = false
       stopRecording()
       return
     }
@@ -659,15 +673,54 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
     await startVoiceRecording()
   }
 
+  const cancelVoiceInput = useCallback(() => {
+    voiceStartRequestRef.current += 1
+    resetVoiceGestureState()
+    setIsTogglingRecording(false)
+
+    if (isRecording || isTogglingRecording || isProcessing) {
+      abortRecording()
+    }
+  }, [abortRecording, isProcessing, isRecording, isTogglingRecording, resetVoiceGestureState])
+
+  const clearVoiceGestureArmedState = useCallback(() => {
+    ignoreVoiceClickUntilRef.current = Date.now() + VOICE_CLICK_SUPPRESSION_MS
+    voiceSendArmedRef.current = false
+    voiceCancelArmedRef.current = false
+    setIsVoiceSendArmed(false)
+    setIsVoiceCancelArmed(false)
+  }, [])
+
+  const armVoiceAutoSend = useCallback(() => {
+    pendingVoiceAutoSubmitRef.current = true
+    setIsVoiceAutoSendPending(true)
+    setIsVoiceAutoSendWaitingForTranscript(true)
+
+    if (typeof navigator !== 'undefined' && navigator.vibrate) {
+      navigator.vibrate([10, 20, 10])
+    }
+  }, [])
+
+  const handleVoiceSendRequest = useCallback(() => {
+    clearVoiceGestureArmedState()
+    armVoiceAutoSend()
+
+    if (isRecording) {
+      stopRecording()
+    }
+  }, [armVoiceAutoSend, clearVoiceGestureArmedState, isRecording, stopRecording])
+
   const handleVoicePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
     if ((event.pointerType === 'mouse' && event.button !== 0) || isProcessing || !isRecording) {
       return
     }
 
     event.preventDefault()
-    voiceGestureStartYRef.current = event.clientY
-    voiceSwipeArmedRef.current = false
-    setIsVoiceSwipeArmed(false)
+    voiceGestureStartXRef.current = event.clientX
+    voiceSendArmedRef.current = false
+    voiceCancelArmedRef.current = false
+    setIsVoiceSendArmed(false)
+    setIsVoiceCancelArmed(false)
 
     if (event.currentTarget.setPointerCapture) {
       event.currentTarget.setPointerCapture(event.pointerId)
@@ -675,21 +728,33 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
   }
 
   const handleVoicePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
-    if (!isRecording || voiceGestureStartYRef.current === null) {
+    if (!isRecording || voiceGestureStartXRef.current === null) {
       return
     }
 
     event.preventDefault()
-    const deltaY = voiceGestureStartYRef.current - event.clientY
-    const nextIsSwipeArmed = voiceSwipeArmedRef.current
-      ? deltaY >= VOICE_SEND_SWIPE_DISARM_THRESHOLD
-      : deltaY >= VOICE_SEND_SWIPE_ARM_THRESHOLD
+    const deltaX = event.clientX - voiceGestureStartXRef.current
+    const nextIsSendArmed = voiceSendArmedRef.current
+      ? deltaX >= VOICE_SEND_DRAG_DISARM_THRESHOLD
+      : deltaX >= VOICE_SEND_DRAG_ARM_THRESHOLD
+    const nextIsCancelArmed = !nextIsSendArmed && (voiceCancelArmedRef.current
+      ? deltaX <= -VOICE_CANCEL_DRAG_DISARM_THRESHOLD
+      : deltaX <= -VOICE_CANCEL_DRAG_ARM_THRESHOLD)
+
+    if (nextIsSendArmed !== voiceSendArmedRef.current) {
+      voiceSendArmedRef.current = nextIsSendArmed
+      setIsVoiceSendArmed(nextIsSendArmed)
+
+      if (nextIsSendArmed && typeof navigator !== 'undefined' && navigator.vibrate) {
+        navigator.vibrate(10)
+      }
+    }
 
-    if (nextIsSwipeArmed !== voiceSwipeArmedRef.current) {
-      voiceSwipeArmedRef.current = nextIsSwipeArmed
-      setIsVoiceSwipeArmed(nextIsSwipeArmed)
+    if (nextIsCancelArmed !== voiceCancelArmedRef.current) {
+      voiceCancelArmedRef.current = nextIsCancelArmed
+      setIsVoiceCancelArmed(nextIsCancelArmed)
 
-      if (nextIsSwipeArmed && typeof navigator !== 'undefined' && navigator.vibrate) {
+      if (nextIsCancelArmed && typeof navigator !== 'undefined' && navigator.vibrate) {
         navigator.vibrate(10)
       }
     }
@@ -700,17 +765,18 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
       event.currentTarget.releasePointerCapture(event.pointerId)
     }
 
-    if (voiceGestureStartYRef.current === null) {
+    if (voiceGestureStartXRef.current === null) {
       return
     }
 
     event.preventDefault()
-    voiceGestureStartYRef.current = null
+    voiceGestureStartXRef.current = null
 
-    if (canceled || !voiceSwipeArmedRef.current) {
-      ignoreVoiceClickUntilRef.current = Date.now() + 400
-      voiceSwipeArmedRef.current = false
-      setIsVoiceSwipeArmed(false)
+    const wasSendArmed = voiceSendArmedRef.current
+    const wasCancelArmed = voiceCancelArmedRef.current
+    clearVoiceGestureArmedState()
+
+    if (canceled || (!wasSendArmed && !wasCancelArmed)) {
       pendingVoiceAutoSubmitRef.current = false
       setIsVoiceAutoSendPending(false)
       setIsVoiceAutoSendWaitingForTranscript(false)
@@ -718,30 +784,15 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
       return
     }
 
-    ignoreVoiceClickUntilRef.current = Date.now() + 400
-    voiceSwipeArmedRef.current = false
-    setIsVoiceSwipeArmed(false)
-    pendingVoiceAutoSubmitRef.current = true
-    setIsVoiceAutoSendPending(true)
-    setIsVoiceAutoSendWaitingForTranscript(true)
-
-    if (typeof navigator !== 'undefined' && navigator.vibrate) {
-      navigator.vibrate([10, 20, 10])
+    if (wasCancelArmed) {
+      cancelVoiceInput()
+      ignoreVoiceClickUntilRef.current = Date.now() + VOICE_CLICK_SUPPRESSION_MS
+      return
     }
 
-    stopRecording()
+    handleVoiceSendRequest()
   }
 
-  const cancelVoiceInput = useCallback(() => {
-    voiceStartRequestRef.current += 1
-    resetVoiceGestureState()
-    setIsTogglingRecording(false)
-
-    if (isRecording || isTogglingRecording || isProcessing) {
-      abortRecording()
-    }
-  }, [abortRecording, isProcessing, isRecording, isTogglingRecording, resetVoiceGestureState])
-
   useEffect(() => {
     const isVoiceFeedbackVisible = isRecording || isTogglingRecording || isProcessing || isVoiceAutoSendPending
 
@@ -760,11 +811,17 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
         return
       }
 
+      if (isMobile && composerControlsRowRef.current?.contains(target)) {
+        return
+      }
+
       if (isRecording) {
-        voiceGestureStartYRef.current = null
-        voiceSwipeArmedRef.current = false
+        voiceGestureStartXRef.current = null
+        voiceSendArmedRef.current = false
+        voiceCancelArmedRef.current = false
         pendingVoiceAutoSubmitRef.current = false
-        setIsVoiceSwipeArmed(false)
+        setIsVoiceSendArmed(false)
+        setIsVoiceCancelArmed(false)
         setIsVoiceAutoSendPending(false)
         setIsVoiceAutoSendWaitingForTranscript(false)
         stopRecording()
@@ -786,7 +843,7 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
     return () => {
       document.removeEventListener('pointerdown', handleOutsidePointerDown, true)
     }
-  }, [cancelVoiceInput, isProcessing, isRecording, isTogglingRecording, isVoiceAutoSendPending, stopRecording])
+  }, [cancelVoiceInput, isMobile, isProcessing, isRecording, isTogglingRecording, isVoiceAutoSendPending, stopRecording])
 
   useEffect(() => {
     const textToUse = transcript || interimTranscript
@@ -821,6 +878,10 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
     }
   }, [isTogglingRecording])
 
+  useEffect(() => {
+    setVoiceRecordingStartedAt(isRecording ? Date.now() : null)
+  }, [isRecording])
+
   useEffect(() => {
     if (!pendingVoiceAutoSubmitRef.current || isVoiceAutoSendWaitingForTranscript || isRecording || isProcessing || !prompt.trim()) {
       return
@@ -832,6 +893,14 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
     handleSubmitRef.current()
   }, [prompt, isRecording, isProcessing, isVoiceAutoSendWaitingForTranscript])
 
+  useEffect(() => {
+    if (!isVoiceAutoSendWaitingForTranscript || isRecording || isProcessing || !transcript.trim()) {
+      return
+    }
+
+    setIsVoiceAutoSendWaitingForTranscript(false)
+  }, [isRecording, isProcessing, transcript, isVoiceAutoSendWaitingForTranscript])
+
   useEffect(() => {
     if (pendingVoiceAutoSubmitRef.current && !isRecording && !isProcessing && !transcript.trim() && !interimTranscript.trim()) {
       pendingVoiceAutoSubmitRef.current = false
@@ -1255,7 +1324,6 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
 
     return info?.name || model.modelID || currentModel
   }, [currentModel, model, providersData])
-  const isMobile = useMobile()
   const { setShowDialog, hasForSession: hasPermissionsForSession } = usePermissions()
   const hasPendingPermissionForSession = hasPermissionsForSession(sessionID)
   const { hasVariants, currentVariant, cycleVariant } = useVariants(directory, modelSelectionSession)
@@ -1354,34 +1422,25 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
           : 'Goal mode: the next message becomes the objective'
   const isGoalModeDisabled = lockedReason !== null || hasOpenGoal || isBashMode || startGoal.isPending
   const toggleGoalArmed = () => setIsGoalArmed((value) => !value)
-  const voiceFeedbackState: VoiceStatusOverlayState | null = isTogglingRecording
+  const voiceFeedbackState: VoiceRecorderStripState | null = isTogglingRecording
     ? 'starting'
     : isProcessing
       ? isVoiceAutoSendPending
         ? 'sending'
         : 'processing'
       : isRecording
-        ? isVoiceSwipeArmed
-          ? 'readyToSend'
-          : 'recording'
+        ? isVoiceCancelArmed
+          ? 'cancelArmed'
+          : isVoiceSendArmed
+            ? 'readyToSend'
+            : 'recording'
         : isVoiceAutoSendPending
           ? 'sending'
           : null
-  const showVoiceFeedback = voiceFeedbackState !== null
+  const mobileVoiceRecorderState = isMobile ? voiceFeedbackState : null
   const hasPromptContent = prompt.trim().length > 0 || imageAttachments.length > 0
   const canUseMobileVoice = isMobile && sttEnabled && sttSupported && !hasPendingPermissionForSession
-  const showMobileKeys = isMobile && isPromptFocused && !hasPendingPermissionForSession
-  const voiceFeedbackLabel = voiceFeedbackState === 'starting'
-    ? 'Starting microphone...'
-    : voiceFeedbackState === 'sending'
-      ? 'Transcribing and sending...'
-      : voiceFeedbackState === 'processing'
-        ? 'Transcribing...'
-        : voiceFeedbackState === 'readyToSend'
-          ? 'Release to send'
-          : voiceFeedbackState === 'recording'
-            ? 'Recording... swipe up to send'
-            : null
+  const showMobileKeys = isMobile && isPromptFocused && !hasPendingPermissionForSession && mobileVoiceRecorderState === null
   const voiceButtonTitle = voiceFeedbackState === 'starting'
     ? 'Starting microphone'
     : voiceFeedbackState === 'sending'
@@ -1390,9 +1449,22 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
         ? 'Transcribing speech'
         : voiceFeedbackState === 'readyToSend'
           ? 'Release to send'
-          : voiceFeedbackState === 'recording'
-            ? 'Tap to transcribe'
-            : 'Tap to speak'
+          : voiceFeedbackState === 'cancelArmed'
+            ? 'Release to discard'
+            : voiceFeedbackState === 'recording'
+              ? 'Tap to transcribe'
+              : 'Tap to speak'
+
+  const handleSendVoiceRecording = () => {
+    if (isRecording) {
+      handleVoiceSendRequest()
+      return
+    }
+
+    if (isProcessing && !isVoiceAutoSendPending) {
+      armVoiceAutoSend()
+    }
+  }
 
 
 
@@ -1413,7 +1485,7 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
           ? 'bg-destructive hover:bg-destructive/90 text-destructive-foreground border-destructive/60 animate-pulse'
           : 'bg-muted hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground border-border'
       }`
-      : `min-h-10 min-w-10 px-0 rounded-lg transition-all duration-150 flex items-center justify-center border touch-none select-none ${
+      : `min-h-11 min-w-11 px-0 rounded-lg transition-all duration-150 flex items-center justify-center border touch-none select-none ${
         isBusy
           ? 'bg-success text-success-foreground border-success/70 shadow-lg shadow-success/40'
           : 'bg-muted hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground border-border active:bg-muted-foreground/30 active:scale-95'
@@ -1427,10 +1499,6 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
         className={containerClassName}
         {...voiceGestureHandlers}
       >
-        {!isDesktop && showVoiceFeedback && (
-          <div aria-hidden="true" className="absolute inset-x-0 bottom-full z-20 h-44 touch-none" />
-        )}
-        <VoiceStatusOverlay show={!isDesktop && showVoiceFeedback} label={voiceFeedbackLabel} state={voiceFeedbackState} />
         <button
           type="button"
           data-voice-variant={variant}
@@ -1595,9 +1663,27 @@ return (
         </div>
       )}
 
-      <div data-testid="composer-controls-row" className="flex gap-1.5 md:gap-2 items-center justify-between">
+      <div ref={composerControlsRowRef} data-testid="composer-controls-row" className="flex gap-1.5 md:gap-2 items-center justify-between">
         <div className="flex flex-1 md:flex-initial gap-1.5 md:gap-2 items-center min-w-0">
-          {showMobileKeys ? renderMobileKeys() : (
+          {mobileVoiceRecorderState ? (
+            <>
+              <button
+                type="button"
+                aria-label="Discard recording"
+                title="Discard recording"
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={cancelVoiceInput}
+                className={cn(
+                  getIconToggleButtonClassName(false),
+                  'flex items-center justify-center size-11 p-0 flex-shrink-0',
+                  isVoiceCancelArmed && 'bg-destructive hover:bg-destructive/90 text-destructive-foreground border-destructive',
+                )}
+              >
+                <X className="w-5 h-5" />
+              </button>
+              <VoiceRecorderStrip state={mobileVoiceRecorderState} startedAt={voiceRecordingStartedAt} />
+            </>
+          ) : showMobileKeys ? renderMobileKeys() : (
             <>
               <AgentQuickSelect
                 directory={directory}
@@ -1626,7 +1712,7 @@ return (
                 session={modelSelectionSession}
               >
                 <button
-                  className="px-2.5 py-0.5 md:px-3 min-h-10 md:min-h-9 min-w-0 rounded-lg text-xs md:text-sm font-medium border bg-muted border-border text-muted-foreground hover:bg-muted-foreground/10 hover:border-foreground/30 transition-colors cursor-pointer flex-1 md:flex-initial md:w-auto md:max-w-[220px] dark:border-border/30 flex flex-col items-start justify-center overflow-hidden"
+                  className="px-2.5 py-0.5 md:px-3 min-h-11 md:min-h-9 min-w-0 rounded-lg text-xs md:text-sm font-medium border bg-muted border-border text-muted-foreground hover:bg-muted-foreground/10 hover:border-foreground/30 transition-colors cursor-pointer flex-1 md:flex-initial md:w-auto md:max-w-[220px] dark:border-border/30 flex flex-col items-start justify-center overflow-hidden"
                 >
                   <span className="truncate w-full text-left">{displayModelName || 'Select model'}</span>
                   {hasVariants && currentVariant && (
@@ -1674,14 +1760,34 @@ return (
           {canUseMobileVoice && (
             renderVoiceButton('mobile')
           )}
-          {showMobileScrollButton ? (
+          {mobileVoiceRecorderState ? (
+            <button
+              type="button"
+              aria-label="Send recording"
+              title="Send recording"
+              disabled={mobileVoiceRecorderState === 'starting'}
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={handleSendVoiceRecording}
+              className={cn(
+                getIconToggleButtonClassName(false),
+                'flex items-center justify-center size-11 p-0 flex-shrink-0',
+                isVoiceSendArmed && 'bg-success hover:bg-success/90 text-success-foreground border-success',
+              )}
+            >
+              {mobileVoiceRecorderState === 'sending' ? (
+                <div className="w-5 h-5 animate-spin rounded-full border-2 border-foreground border-t-transparent" />
+              ) : (
+                <ArrowUp className="w-5 h-5" />
+              )}
+            </button>
+          ) : showMobileScrollButton ? (
             <button
               type="button"
               aria-label="Scroll to bottom"
               title="Scroll to bottom"
               onMouseDown={(e) => e.preventDefault()}
               onClick={onScrollToBottom}
-              className={cn(getIconToggleButtonClassName(false), 'flex items-center justify-center size-10 p-0')}
+              className={cn(getIconToggleButtonClassName(false), 'flex items-center justify-center size-11 p-0')}
             >
               <ArrowDown className="w-5 h-5" />
             </button>
diff --git a/frontend/src/components/message/VoiceRecorderStrip.tsx b/frontend/src/components/message/VoiceRecorderStrip.tsx
new file mode 100644
index 000000000..b119f2703
--- /dev/null
+++ b/frontend/src/components/message/VoiceRecorderStrip.tsx
@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react'
+import { LoaderCircle } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+export type VoiceRecorderStripState =
+  | 'starting'
+  | 'recording'
+  | 'readyToSend'
+  | 'cancelArmed'
+  | 'processing'
+  | 'sending'
+
+interface VoiceRecorderStripProps {
+  state: VoiceRecorderStripState
+  startedAt: number | null
+}
+
+const WAVEFORM_BAR_COUNT = 5
+const WAVEFORM_BAR_DELAY_MS = 120
+
+const STRIP_TONES: Record<VoiceRecorderStripState, string> = {
+  starting: 'border-border bg-muted/50 text-muted-foreground',
+  recording: 'border-border bg-muted/50 text-foreground',
+  readyToSend: 'border-success/60 bg-success/10 text-success',
+  cancelArmed: 'border-destructive/60 bg-destructive/10 text-destructive',
+  processing: 'border-border bg-muted/50 text-muted-foreground',
+  sending: 'border-border bg-muted/50 text-muted-foreground',
+}
+
+function WaveformBars() {
+  return (
+    <div aria-hidden="true" className="flex h-4 items-end gap-[2px] text-destructive">
+      {Array.from({ length: WAVEFORM_BAR_COUNT }, (_, index) => (
+        <span
+          key={index}
+          className="animate-voice-wave-bar h-full w-[3px] rounded-full bg-current motion-reduce:animate-none"
+          style={{ animationDelay: `${index * WAVEFORM_BAR_DELAY_MS}ms` }}
+        />
+      ))}
+    </div>
+  )
+}
+
+function useElapsedLabel(startedAt: number | null): string | null {
+  const [elapsedSeconds, setElapsedSeconds] = useState(0)
+
+  useEffect(() => {
+    if (startedAt === null) return
+
+    const tick = () => setElapsedSeconds(Math.max(0, Math.floor((Date.now() - startedAt) / 1000)))
+    tick()
+    const interval = setInterval(tick, 1000)
+
+    return () => clearInterval(interval)
+  }, [startedAt])
+
+  if (startedAt === null) return null
+
+  return `${Math.floor(elapsedSeconds / 60)}:${String(elapsedSeconds % 60).padStart(2, '0')}`
+}
+
+export function VoiceRecorderStrip({ state, startedAt }: VoiceRecorderStripProps) {
+  const elapsedLabel = useElapsedLabel(state === 'recording' ? startedAt : null)
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className={cn(
+        'flex min-h-11 min-w-0 flex-1 items-center gap-2 rounded-lg border px-2.5 text-xs font-medium',
+        STRIP_TONES[state],
+      )}
+    >
+      {state === 'starting' && (
+        <>
+          <LoaderCircle className="size-4 shrink-0 animate-spin" />
+          <span className="truncate">Starting mic…</span>
+        </>
+      )}
+      {state === 'recording' && (
+        <>
+          <span aria-hidden="true" className="size-2 shrink-0 animate-pulse rounded-full bg-destructive" />
+          <span aria-hidden="true" className="shrink-0 font-mono tabular-nums">{elapsedLabel}</span>
+          <WaveformBars />
+          <span className="ml-auto shrink-0 truncate text-[10px] uppercase tracking-wide opacity-60">‹ discard · send ›</span>
+        </>
+      )}
+      {state === 'readyToSend' && <span className="truncate">Release to send</span>}
+      {state === 'cancelArmed' && <span className="truncate">Release to discard</span>}
+      {state === 'processing' && (
+        <>
+          <LoaderCircle className="size-4 shrink-0 animate-spin" />
+          <span className="truncate">Transcribing…</span>
+        </>
+      )}
+      {state === 'sending' && (
+        <>
+          <LoaderCircle className="size-4 shrink-0 animate-spin" />
+          <span className="truncate">Transcribing &amp; sending…</span>
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/message/VoiceStatusOverlay.tsx b/frontend/src/components/message/VoiceStatusOverlay.tsx
deleted file mode 100644
index 596e48fdd..000000000
--- a/frontend/src/components/message/VoiceStatusOverlay.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { ArrowUp, LoaderCircle, X } from 'lucide-react'
-
-export type VoiceStatusOverlayState = 'starting' | 'recording' | 'readyToSend' | 'processing' | 'sending'
-
-interface VoiceStatusOverlayProps {
-  show: boolean
-  label: string | null
-  state: VoiceStatusOverlayState | null
-}
-
-function WaveformBars() {
-  return (
-    <div className="flex items-end gap-[3px] h-8">
-      {[0, 1, 2, 3, 4].map((i) => (
-        <div
-          key={i}
-          className="w-1.5 rounded-full bg-success-foreground"
-          style={{
-            height: '100%',
-            animation: `waveBar 0.9s ease-in-out infinite`,
-            animationDelay: `${i * 0.12}s`,
-          }}
-        />
-      ))}
-      <style>{`
-        @keyframes waveBar {
-          0%, 100% { transform: scaleY(0.2); }
-          50% { transform: scaleY(1); }
-        }
-      `}</style>
-    </div>
-  )
-}
-
-export function VoiceStatusOverlay({ show, label, state }: VoiceStatusOverlayProps) {
-  if (!show || !label || !state) {
-    return null
-  }
-
-  const isLoading = state === 'starting' || state === 'processing' || state === 'sending'
-  const actionWords = state === 'readyToSend'
-    ? ['Release', 'To', 'Send']
-    : ['Swipe', 'To', 'Send']
-
-  return (
-    <div
-      aria-live="polite"
-      className="pointer-events-none absolute inset-x-0 bottom-0 z-10"
-    >
-      <span className="sr-only">{label}</span>
-      <div className="animate-voice-overlay-in relative flex h-44 w-full flex-col items-center justify-between overflow-hidden rounded-xl border border-success/70 bg-success px-1 py-4 text-success-foreground shadow-lg shadow-success/40">
-        <div className="absolute inset-x-1 top-1 h-10 rounded-full bg-success-foreground/20 blur-sm" />
-        <div className="relative flex flex-1 flex-col items-center justify-center gap-1">
-          {isLoading ? (
-            state === 'processing' ? (
-              <WaveformBars />
-            ) : (
-              <LoaderCircle className="h-6 w-6 animate-spin" />
-            )
-          ) : (
-            <>
-              <ArrowUp className="h-8 w-8 animate-bounce" />
-              <div className="flex flex-col items-center text-[9px] font-bold uppercase leading-none tracking-tight">
-                {actionWords.map((word) => (
-                  <span key={word}>{word}</span>
-                ))}
-              </div>
-            </>
-          )}
-        </div>
-        {!isLoading && (
-          <X className="relative h-4 w-4" />
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/frontend/src/components/navigation/ToolSidePanel.tsx b/frontend/src/components/navigation/ToolSidePanel.tsx
index 930571d4b..06f079245 100644
--- a/frontend/src/components/navigation/ToolSidePanel.tsx
+++ b/frontend/src/components/navigation/ToolSidePanel.tsx
@@ -30,7 +30,7 @@ import { withQueryParam } from '@/lib/navigation'
 import type { TerminalTarget } from '@/lib/terminal-target'
 import { useActiveWorkCounts, useActivityWindowMinutes } from '@/hooks/useActiveWork'
 import { formatActivityWindow } from '@/lib/activeWork'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TOOLTIP_OPEN_DELAY_MS } from '@/components/ui/tooltip'
 import { restoreOverlayFocus } from '@/lib/overlayFocus'
 import { cn } from '@/lib/utils'
 import { isLocalOpenCodeServer, useRouteOpenCodeServerId } from '@/contexts/OpenCodeServerContext'
@@ -113,7 +113,7 @@ interface RailButtonProps {
 function RailButton({ item, active, onClick, indicator }: RailButtonProps) {
   const Icon = item.icon
   return (
-    <Tooltip delayDuration={0}>
+    <Tooltip delayDuration={TOOLTIP_OPEN_DELAY_MS}>
       <TooltipTrigger asChild>
         <button
           type="button"
diff --git a/frontend/src/components/ui/sidebar.test.tsx b/frontend/src/components/ui/sidebar.test.tsx
index e0d20ecea..ad5d0692e 100644
--- a/frontend/src/components/ui/sidebar.test.tsx
+++ b/frontend/src/components/ui/sidebar.test.tsx
@@ -240,7 +240,7 @@ describe('SidebarItem', () => {
     expect(screen.getByRole('button')).toHaveClass('bg-accent')
   })
 
-  it('uses title attribute when collapsed', () => {
+  it('keeps the label as the accessible name without a native title when collapsed', () => {
     render(
       <TooltipProvider>
         <SidebarItem
@@ -251,7 +251,9 @@ describe('SidebarItem', () => {
       </TooltipProvider>
     )
 
-    expect(screen.getByRole('button')).toHaveAttribute('title', 'Test Item')
+    const button = screen.getByRole('button')
+    expect(button).not.toHaveAttribute('title')
+    expect(button).toHaveAccessibleName('Test Item')
   })
 })
 
diff --git a/frontend/src/components/ui/sidebar.tsx b/frontend/src/components/ui/sidebar.tsx
index 22f0b318c..ef1347b6b 100644
--- a/frontend/src/components/ui/sidebar.tsx
+++ b/frontend/src/components/ui/sidebar.tsx
@@ -6,7 +6,7 @@ import {
   SIDEBAR_MAX_WIDTH,
   SIDEBAR_MIN_WIDTH,
 } from '@/hooks/useSidebarWidth'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger, TOOLTIP_OPEN_DELAY_MS } from '@/components/ui/tooltip'
 
 export interface SidebarProps {
   collapsed: boolean
@@ -204,7 +204,6 @@ export function SidebarItem({
       type="button"
       className={baseClasses}
       onClick={onClick}
-      title={collapsed ? label : undefined}
     >
       <Icon className={cn(dense ? 'h-4 w-4' : 'h-5 w-5', 'flex-shrink-0')} />
       {!collapsed && <span className="truncate">{label}</span>}
@@ -214,7 +213,7 @@ export function SidebarItem({
 
   if (collapsed) {
     return (
-      <Tooltip delayDuration={0}>
+      <Tooltip delayDuration={TOOLTIP_OPEN_DELAY_MS}>
         <TooltipTrigger asChild>{content}</TooltipTrigger>
         <TooltipContent side="right" align="center">
           {label}
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
index dfcd73f08..79b71541b 100644
--- a/frontend/src/components/ui/tooltip.tsx
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -4,6 +4,8 @@ import { cn } from '@/lib/utils'
 
 const TooltipProvider = TooltipPrimitive.Provider
 
+const TOOLTIP_OPEN_DELAY_MS = 500
+
 const Tooltip = TooltipPrimitive.Root
 
 const TooltipTrigger = TooltipPrimitive.Trigger
@@ -26,4 +28,4 @@ const TooltipContent = React.forwardRef<
 ))
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TOOLTIP_OPEN_DELAY_MS }
diff --git a/frontend/src/hooks/useAutoScroll.test.tsx b/frontend/src/hooks/useAutoScroll.test.tsx
index b3d3370bf..4cd38426b 100644
--- a/frontend/src/hooks/useAutoScroll.test.tsx
+++ b/frontend/src/hooks/useAutoScroll.test.tsx
@@ -76,29 +76,29 @@ describe('useAutoScroll', () => {
     time: { created: Date.now() },
   } as SessionMessageInfo)
 
-  const setupHook = (messages: SessionMessageInfo[], sessionId = 'session-1') => {
+  const setupHook = (
+    messages: SessionMessageInfo[],
+    options: {
+      sessionId?: string
+      isContentReady?: boolean
+      container?: HTMLDivElement | null
+    } = {}
+  ) => {
     containerHarness = createScrollContainer()
-    const containerRef = { current: containerHarness.div }
     const onScrollStateChange = vi.fn()
 
+    const initialProps = {
+      container: options.container === undefined ? containerHarness.div : options.container,
+      messages,
+      sessionId: options.sessionId ?? 'session-1',
+      contentVersion: messages.length,
+      isContentReady: options.isContentReady ?? true,
+      onScrollStateChange,
+    }
+
     const renderResult = renderHook(
-      (props) =>
-        useAutoScroll({
-          containerRef: props.containerRef,
-          messages: props.messages,
-          sessionId: props.sessionId,
-          contentVersion: props.contentVersion,
-          onScrollStateChange: props.onScrollStateChange,
-        }),
-      {
-        initialProps: {
-          containerRef,
-          messages,
-          sessionId,
-          contentVersion: messages.length,
-          onScrollStateChange,
-        },
-      }
+      (props: typeof initialProps) => useAutoScroll(props),
+      { initialProps }
     )
 
     return { renderResult, containerHarness, onScrollStateChange }
@@ -131,7 +131,8 @@ describe('useAutoScroll', () => {
 
     act(() => {
       renderResult.rerender({
-        containerRef: { current: containerHarness.div },
+        container: containerHarness.div,
+        isContentReady: true,
         messages: newMessages,
         sessionId: 'session-1',
         contentVersion: newMessages.length,
@@ -165,7 +166,8 @@ describe('useAutoScroll', () => {
 
     act(() => {
       renderResult.rerender({
-        containerRef: { current: containerHarness.div },
+        container: containerHarness.div,
+        isContentReady: true,
         messages,
         sessionId: 'session-1',
         contentVersion: messages.length + 1,
@@ -362,7 +364,8 @@ describe('useAutoScroll', () => {
 
     act(() => {
       renderResult.rerender({
-        containerRef: { current: containerHarness.div },
+        container: containerHarness.div,
+        isContentReady: true,
         messages,
         sessionId: 'session-1',
         contentVersion: messages.length + 1,
@@ -401,7 +404,8 @@ describe('useAutoScroll', () => {
 
     act(() => {
       renderResult.rerender({
-        containerRef: { current: containerHarness.div },
+        container: containerHarness.div,
+        isContentReady: true,
         messages,
         sessionId: 'session-1',
         contentVersion: messages.length + 1,
@@ -436,7 +440,8 @@ describe('useAutoScroll', () => {
 
     act(() => {
       renderResult.rerender({
-        containerRef: { current: containerHarness.div },
+        container: containerHarness.div,
+        isContentReady: true,
         messages,
         sessionId: 'session-1',
         contentVersion: messages.length + 1,
@@ -495,7 +500,8 @@ describe('useAutoScroll', () => {
 
     act(() => {
       renderResult.rerender({
-        containerRef: { current: containerHarness.div },
+        container: containerHarness.div,
+        isContentReady: true,
         messages: newMessages,
         sessionId: 'session-1',
         contentVersion: newMessages.length,
@@ -537,7 +543,8 @@ describe('useAutoScroll', () => {
 
     act(() => {
       renderResult.rerender({
-        containerRef: { current: containerHarness.div },
+        container: containerHarness.div,
+        isContentReady: true,
         messages: olderPage,
         sessionId: 'session-1',
         contentVersion: olderPage.length,
@@ -576,7 +583,8 @@ describe('useAutoScroll', () => {
 
     act(() => {
       renderResult.rerender({
-        containerRef: { current: containerHarness.div },
+        container: containerHarness.div,
+        isContentReady: true,
         messages: appended,
         sessionId: 'session-1',
         contentVersion: appended.length,
@@ -593,7 +601,7 @@ describe('useAutoScroll', () => {
 
   it('resets state when sessionId changes', () => {
     const messages = [createMessage('1', 'user')]
-    const { renderResult, containerHarness } = setupHook(messages, 'session-1')
+    const { renderResult, containerHarness } = setupHook(messages, { sessionId: 'session-1' })
 
     act(() => {
       containerHarness.div.dispatchEvent(
@@ -608,7 +616,8 @@ describe('useAutoScroll', () => {
 
     act(() => {
       renderResult.rerender({
-        containerRef: { current: containerHarness.div },
+        container: containerHarness.div,
+        isContentReady: true,
         messages: newMessages,
         sessionId: 'session-2',
         contentVersion: newMessages.length,
@@ -622,4 +631,72 @@ describe('useAutoScroll', () => {
 
     expect(containerHarness.getScrollTop()).toBe(containerHarness.div.scrollHeight - containerHarness.div.clientHeight)
   })
+
+  it('scrolls to bottom and tracks user scroll once the container mounts after messages arrive', () => {
+    const messages = [createMessage('1', 'user'), createMessage('2', 'assistant')]
+    const { renderResult, containerHarness, onScrollStateChange } = setupHook(messages, { container: null })
+
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+
+    expect(containerHarness.getScrollTop()).toBe(0)
+
+    act(() => {
+      renderResult.rerender({
+        container: containerHarness.div,
+        isContentReady: true,
+        messages,
+        sessionId: 'session-1',
+        contentVersion: messages.length,
+        onScrollStateChange,
+      })
+    })
+
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+
+    expect(containerHarness.getScrollTop()).toBe(containerHarness.div.scrollHeight - containerHarness.div.clientHeight)
+
+    act(() => {
+      containerHarness.setScrollTop(100)
+      containerHarness.div.dispatchEvent(
+        new WheelEvent('wheel', {
+          deltaY: -50,
+          bubbles: true,
+        })
+      )
+    })
+
+    expect(onScrollStateChange).toHaveBeenCalledWith(true)
+  })
+
+  it('waits for ready content before the initial scroll', () => {
+    const messages = [createMessage('1', 'user'), createMessage('2', 'assistant')]
+    const { renderResult, containerHarness, onScrollStateChange } = setupHook(messages, { isContentReady: false })
+
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+
+    expect(containerHarness.getScrollTop()).toBe(0)
+
+    act(() => {
+      renderResult.rerender({
+        container: containerHarness.div,
+        isContentReady: true,
+        messages,
+        sessionId: 'session-1',
+        contentVersion: messages.length,
+        onScrollStateChange,
+      })
+    })
+
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+
+    expect(containerHarness.getScrollTop()).toBe(containerHarness.div.scrollHeight - containerHarness.div.clientHeight)
+  })
 })
diff --git a/frontend/src/hooks/useAutoScroll.ts b/frontend/src/hooks/useAutoScroll.ts
index e801256e4..daf3140ee 100644
--- a/frontend/src/hooks/useAutoScroll.ts
+++ b/frontend/src/hooks/useAutoScroll.ts
@@ -7,10 +7,11 @@ const SHOW_SCROLL_BUTTON_THRESHOLD_PX = 120
 const SCROLL_TO_BOTTOM_FRAME_COUNT = 2
 
 interface UseAutoScrollOptions {
-  containerRef?: React.RefObject<HTMLDivElement | null>
+  container?: HTMLDivElement | null
   messages?: SessionMessageInfo[]
   sessionId?: string
   contentVersion?: number
+  isContentReady: boolean
   onScrollStateChange?: (isScrolledUp: boolean) => void
 }
 
@@ -20,10 +21,11 @@ interface UseAutoScrollReturn {
 }
 
 export function useAutoScroll({
-  containerRef,
+  container,
   messages,
   sessionId,
   contentVersion,
+  isContentReady,
   onScrollStateChange
 }: UseAutoScrollOptions): UseAutoScrollReturn {
   const lastMessageCountRef = useRef(0)
@@ -42,7 +44,7 @@ export function useAutoScroll({
   onScrollStateChangeRef.current = onScrollStateChange
 
   const scrollToBottom = useCallback(() => {
-    if (!containerRef?.current) return
+    if (!container) return
     userScrolledAtRef.current = 0
     userDisengagedRef.current = false
     isScrollButtonVisibleRef.current = false
@@ -52,8 +54,7 @@ export function useAutoScroll({
     let frameCount = 0
     const scrollAfterLayout = () => {
       if (scrollRequestIdRef.current !== scrollRequestId) return
-      if (!containerRef?.current) return
-      containerRef.current.scrollTop = containerRef.current.scrollHeight
+      container.scrollTop = container.scrollHeight
       frameCount += 1
       if (frameCount < SCROLL_TO_BOTTOM_FRAME_COUNT) {
         requestAnimationFrame(scrollAfterLayout)
@@ -61,10 +62,9 @@ export function useAutoScroll({
     }
     requestAnimationFrame(scrollAfterLayout)
     onScrollStateChangeRef.current?.(false)
-  }, [containerRef])
+  }, [container])
 
   const markDisengaged = useCallback(() => {
-    const container = containerRef?.current
     if (!container) return
     const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight
     userScrolledAtRef.current = Date.now()
@@ -74,16 +74,15 @@ export function useAutoScroll({
       onScrollStateChangeRef.current?.(true)
     }
     userDisengagedRef.current = true
-  }, [containerRef])
+  }, [container])
 
   const scrollByUser = useCallback((delta: number) => {
-    const container = containerRef?.current
     if (!container) return
     if (delta < 0) {
       markDisengaged()
     }
     container.scrollBy({ top: delta })
-  }, [containerRef, markDisengaged])
+  }, [container, markDisengaged])
 
   useEffect(() => {
     lastMessageCountRef.current = 0
@@ -96,12 +95,10 @@ export function useAutoScroll({
   }, [sessionId])
 
   useEffect(() => {
-    const container = containerRef?.current
     if (!container) return
     
     const updateScrollButtonVisibility = () => {
-      const container = containerRef?.current
-      if (!container || !userDisengagedRef.current || isScrollButtonVisibleRef.current) return
+      if (!userDisengagedRef.current || isScrollButtonVisibleRef.current) return
       const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight
       if (distanceFromBottom > SHOW_SCROLL_BUTTON_THRESHOLD_PX) {
         isScrollButtonVisibleRef.current = true
@@ -206,10 +203,10 @@ export function useAutoScroll({
       container.removeEventListener('keydown', handleKeyDown)
       container.removeEventListener('scroll', handleScroll)
     }
-  }, [containerRef, sessionId, messages, markDisengaged])
+  }, [container, sessionId, messages, markDisengaged])
 
   useEffect(() => {
-    if (!containerRef?.current || !messages) return
+    if (!container || !messages) return
 
     const currentCount = messages.length
     const prevCount = lastMessageCountRef.current
@@ -219,6 +216,8 @@ export function useAutoScroll({
     const previousLastMessageId = lastMessageIdRef.current
     lastMessageIdRef.current = lastMessage?.id
 
+    if (!isContentReady) return
+
     if (!hasInitialScrolledRef.current && currentCount > 0) {
       hasInitialScrolledRef.current = true
       scrollToBottom()
@@ -238,7 +237,7 @@ export function useAutoScroll({
     const recentlyScrolled = timeSinceUserScroll < SCROLL_LOCK_MS
     
     if (userDisengagedRef.current) {
-      const distanceFromBottom = containerRef.current.scrollHeight - containerRef.current.scrollTop - containerRef.current.clientHeight
+      const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight
       if (!isScrollButtonVisibleRef.current && distanceFromBottom > SHOW_SCROLL_BUTTON_THRESHOLD_PX) {
         isScrollButtonVisibleRef.current = true
         onScrollStateChangeRef.current?.(true)
@@ -251,7 +250,7 @@ export function useAutoScroll({
     }
 
     scrollToBottom()
-  }, [messages, containerRef, scrollToBottom, contentVersion])
+  }, [messages, container, isContentReady, scrollToBottom, contentVersion])
 
   return { scrollToBottom, scrollByUser }
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 28a2b0ec2..e3b6448a0 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -175,13 +175,13 @@ body {
   animation: page-slide-in-from-left 300ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
 }
 
-@keyframes voice-overlay-in {
-  from { transform: translateY(12px) scale(0.97); opacity: 0; }
-  to { transform: translateY(0) scale(1); opacity: 1; }
-}
+@theme {
+  --animate-voice-wave-bar: voice-wave-bar 0.9s ease-in-out infinite;
 
-.animate-voice-overlay-in {
-  animation: voice-overlay-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
+  @keyframes voice-wave-bar {
+    0%, 100% { transform: scaleY(0.25); }
+    50% { transform: scaleY(1); }
+  }
 }
 
 @keyframes prompt-takeover-rise {
diff --git a/frontend/src/pages/SessionDetail.tsx b/frontend/src/pages/SessionDetail.tsx
index 7cc5eb483..444af48db 100644
--- a/frontend/src/pages/SessionDetail.tsx
+++ b/frontend/src/pages/SessionDetail.tsx
@@ -136,6 +136,7 @@ export function SessionDetail() {
   const { preferences, updateSettings } = useSettings();
   const { open: openSettings, openTab: openSettingsTab } = useSettingsDialog();
   const messageContainerRef = useRef<HTMLDivElement>(null);
+  const [messageContainer, setMessageContainer] = useState<HTMLDivElement | null>(null);
   const promptInputRef = useRef<PromptInputHandle>(null);
   const [sessionsDialogOpen, setSessionsDialogOpen] = useState(false);
   const [fileBrowserOpen, setFileBrowserOpen] = useDialogParam('files');
@@ -302,12 +303,19 @@ export function SessionDetail() {
   }, [messagePickerMode, sessionId, revertMessageID, serverId]);
 
   const messagesContentVersion = useMemo(() => getMessagesContentVersion(messages), [messages]);
+  const isTranscriptLoading = repoLoading || sessionLoading || messagesLoading;
+
+  const attachMessageContainer = useCallback((element: HTMLDivElement | null) => {
+    messageContainerRef.current = element;
+    setMessageContainer(element);
+  }, []);
 
   const { scrollToBottom, scrollByUser } = useAutoScroll({
-    containerRef: messageContainerRef,
+    container: messageContainer,
     messages,
     sessionId,
     contentVersion: messagesContentVersion,
+    isContentReady: !isTranscriptLoading,
     onScrollStateChange: setShowScrollButton
   });
 
@@ -861,8 +869,8 @@ export function SessionDetail() {
 
       <div className="flex flex-1 min-h-0">
       <div className="relative flex-1 min-w-0 overflow-hidden flex flex-col">
-        <div key={sessionId} data-testid="session-message-scroll" ref={messageContainerRef} onScroll={handleMessageScroll} className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain [mask-image:linear-gradient(to_bottom,transparent,black_16px,black)]" style={{ paddingBottom: promptOverlayHeight + inputBottomOffset + PROMPT_OVERLAY_CLEARANCE_PX }}>
-          {repoLoading || sessionLoading || messagesLoading ? (
+        <div key={sessionId} data-testid="session-message-scroll" ref={attachMessageContainer} onScroll={handleMessageScroll} className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain [mask-image:linear-gradient(to_bottom,transparent,black_16px,black)]" style={{ paddingBottom: promptOverlayHeight + inputBottomOffset + PROMPT_OVERLAY_CLEARANCE_PX }}>
+          {isTranscriptLoading ? (
             <MessageSkeleton />
           ) : sessionDirectory ? (
             <MessageThread 
diff --git a/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx b/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx
index 7efc96365..6f7ae3202 100644
--- a/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx
+++ b/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx
@@ -295,6 +295,7 @@ describe('SessionDetail scroll floating button', () => {
     showScrollButton: boolean
     promptContent?: boolean
     sessionActive?: boolean
+    messagesLoading?: boolean
   }) => {
     mocks.useMobile.mockReturnValue(opts.mobile)
     mocks.useSessionStatusForSession.mockReturnValue({ type: opts.sessionActive ? 'busy' : 'idle' })
@@ -302,7 +303,7 @@ describe('SessionDetail scroll floating button', () => {
       messages: [],
       pending: [],
       status: opts.sessionActive ? 'busy' : 'idle',
-      isLoading: false,
+      isLoading: opts.messagesLoading ?? false,
       fetchOlder: vi.fn(),
       hasOlder: false,
     })
@@ -460,4 +461,26 @@ describe('SessionDetail scroll floating button', () => {
     reportObservedHeight(140)
     expect(paddingBottom()).toBe('156px')
   })
+
+  it('marks the transcript content as not ready while messages load and ready afterwards', async () => {
+    const { buildTree, rerender } = renderWith({ mobile: true, showScrollButton: false, messagesLoading: true })
+
+    await waitFor(() => {
+      expect(mocks.useAutoScroll.mock.calls.at(-1)?.[0]).toMatchObject({ isContentReady: false })
+    })
+
+    mocks.useSessionTranscript.mockReturnValue({
+      messages: [],
+      pending: [],
+      status: 'idle',
+      isLoading: false,
+      fetchOlder: vi.fn(),
+      hasOlder: false,
+    })
+    rerender(buildTree())
+
+    await waitFor(() => {
+      expect(mocks.useAutoScroll.mock.calls.at(-1)?.[0]).toMatchObject({ isContentReady: true })
+    })
+  })
 })