feat(mobile): mid-turn messages wait as cards above the phone composer

mobile/src/session/MobileNativeChatComposer.test.ts

@@ -1,6 +1,6 @@
-import { createElement, StrictMode, type ComponentProps } from 'react'
+import { createElement, createRef, StrictMode, type ComponentProps } from 'react'
 import { act, create, type ReactTestRenderer } from 'react-test-renderer'
-import { Keyboard } from 'react-native'
+import { Keyboard, type TextInput } from 'react-native'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { radii, spacing } from '../theme/mobile-theme'
 import { MobileNativeChatComposer as NativeChatComposer } from './MobileNativeChatComposer'
@@ -284,6 +284,26 @@ describe('MobileNativeChatComposer', () => {
     expect(sendButton().props).toMatchObject({ disabled: true })
   })
 
+  it('hands its owner the text field, so Edit can focus it', async () => {
+    const focus = vi.fn()
+    const inputRef = createRef<TextInput>()
+    await act(async () => {
+      renderer = create(
+        createElement(MobileNativeChatComposer, {
+          inputRef,
+          value: '',
+          onChangeText: vi.fn(),
+          onSend: vi.fn().mockResolvedValue(true),
+          sendSurfaceId: 'tab-a',
+          getSendCompletionGeneration: getCurrentSendCompletionGeneration
+        }),
+        { createNodeMock: (element) => (element.type === 'TextInput' ? { focus } : null) }
+      )
+    })
+    inputRef.current?.focus()
+    expect(focus).toHaveBeenCalledTimes(1)
+  })
+
   it('renders a removable thumbnail for each pending image attachment', async () => {
     const onRemoveAttachment = vi.fn()
     await act(async () => {

mobile/src/session/MobileNativeChatComposer.tsx

@@ -36,6 +36,8 @@ const NO_FILE_PATHS: string[] = []
 const NO_ATTACHMENTS: PendingNativeChatImage[] = []
 
 type Props = {
+  /** Lets the owner focus the field, e.g. after Edit moves a queued message into it. */
+  inputRef?: React.Ref<TextInput>
   structuredCommands?: readonly AgentSessionConversationCommand[]
   /** Controlled composer text — owned by the parent so dictation can write to it. */
   value: string
@@ -71,6 +73,7 @@ type Props = {
 }
 
 export function MobileNativeChatComposer({
+  inputRef,
   value,
   onChangeText,
   onSend,
@@ -249,6 +252,7 @@ export function MobileNativeChatComposer({
       <View style={styles.composerInset} testID="native-chat-composer-inset">
         <View style={styles.bar} testID="native-chat-composer">
           <TextInput
+            ref={inputRef}
             style={mobileNativeChatInputStyles.input}
             value={value}
             onChangeText={handleChange}

mobile/src/session/MobileNativeChatOverlay.test.ts

@@ -11,6 +11,7 @@ vi.mock('react-native', () => ({
 }))
 
 vi.mock('./MobileNativeChatView', () => ({ MobileNativeChatView: 'ChatView' }))
+vi.mock('./MobileNativeChatQueuedMessages', () => ({ MobileNativeChatQueuedMessages: 'Queued' }))
 
 function assistantTurn(id: string, text: string): NativeChatMessage {
   return { id, role: 'assistant', blocks: [{ type: 'text', text }], timestamp: 0, source: 'hook' }
@@ -27,6 +28,7 @@ type Tick = {
 }
 
 function overlayElement(tick: Tick): ReturnType<typeof createElement> {
+  // oxlint-disable-next-line typescript/consistent-type-assertions -- SAFETY: the overlay reads only these controller members; the rest of the controller is unreachable from it.
   const controller = {
     showNativeChat: tick.show ?? true,
     nativeChatSession: { messages: tick.messages ?? [], status: 'ready' },
@@ -38,7 +40,16 @@ function overlayElement(tick: Tick): ReturnType<typeof createElement> {
     chatPending: [],
     chatImagePreviewsByMessageId: {},
     chatComposerText: '',
-    setChatComposerText: vi.fn()
+    setChatComposerText: vi.fn(),
+    nativeChatQueued: {
+      cards: [],
+      send: vi.fn(),
+      delete: vi.fn(),
+      edit: vi.fn(),
+      pause: null,
+      resume: vi.fn(),
+      sessionKey: 'session-a'
+    }
   } as unknown as MobileNativeChatController
   return createElement(MobileNativeChatOverlay, {
     controller,

mobile/src/session/MobileNativeChatOverlay.tsx

@@ -5,6 +5,7 @@ import { foldMobileNativeChatMessages } from './mobile-native-chat-render-data'
 import type { MobileNativeChatImageAttachments } from './use-mobile-native-chat-image-attachments'
 import type { MobileNativeChatController } from './use-mobile-native-chat-controller'
 import { useMobileNativeChatStreamingBubble } from './use-mobile-native-chat-streaming-bubble'
+import { useMobileNativeChatQueuedSlot } from './use-mobile-native-chat-queued-slot'
 
 type Props = {
   controller: MobileNativeChatController
@@ -59,6 +60,16 @@ export function MobileNativeChatOverlay({
     controller.nativeChatStreamScopeKey,
     controller.nativeChatStreamLive
   )
+  const queued = controller.nativeChatQueued
+  const queuedSlot = useMobileNativeChatQueuedSlot({
+    cards: queued.cards,
+    onSend: queued.send,
+    onDelete: queued.delete,
+    onEdit: queued.edit,
+    pause: queued.pause,
+    onResume: queued.resume,
+    sessionKey: queued.sessionKey
+  })
   if (!controller.showNativeChat) {
     return null
   }
@@ -89,6 +100,7 @@ export function MobileNativeChatOverlay({
         onAnswerQuestion={controller.handleNativeChatQuestionAnswer}
         permission={controller.nativeChatPermission}
         onRespondPermission={controller.handleNativeChatRespondPermission}
+        queuedSlot={queuedSlot}
         onOpenFile={onOpenFile}
         hasMore={session.hasMore}
         loadingEarlier={session.loadingEarlier}