fix(mobile): restore the composer message when a send fails (port #3785) (#3787)

Author: Gilbert09

apps/mobile/src/app/task/[id].tsx

@@ -285,8 +285,11 @@ export default function TaskDetailScreen() {
   // creates a fresh run that resumes from the previous one and queues the
   // message as pending_user_message.
   const handleSendAfterTerminal = useCallback(
-    async (text: string, attachments: PendingAttachment[]) => {
-      if (!taskId || !task) return;
+    async (
+      text: string,
+      attachments: PendingAttachment[],
+    ): Promise<boolean> => {
+      if (!taskId || !task) return false;
       // Optimistically echo into the chat before tearing down the old session
       // and waiting for the resume run's SSE stream to come up.
       const echoAttachments = attachments.map((a) => ({
@@ -324,6 +327,7 @@ export default function TaskDetailScreen() {
         setTask(updatedTask);
         await connectToTask(updatedTask);
         updateTaskInCache(updatedTask);
+        return true;
       } catch (err) {
         log.error("Failed to send after terminal", err);
         pendingTaskPromptStoreApi.clear(taskId);
@@ -332,6 +336,7 @@ export default function TaskDetailScreen() {
           "Failed to send",
           "Could not continue this task. Please try again.",
         );
+        return false;
       }
     },
     [
@@ -361,8 +366,11 @@ export default function TaskDetailScreen() {
   );
 
   const handleSendPrompt = useCallback(
-    (text: string, attachments: PendingAttachment[]) => {
-      if (!taskId) return;
+    async (
+      text: string,
+      attachments: PendingAttachment[],
+    ): Promise<boolean> => {
+      if (!taskId) return false;
       Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
 
       // Saving an in-place edit: overwrite the queued message and release the
@@ -374,38 +382,37 @@ export default function TaskDetailScreen() {
         queue.update(taskId, editingId, { content: text, attachments });
         queue.clearEditing(taskId);
         flushQueuedMessagesIfIdle(taskId);
-        return;
+        return true;
       }
 
       if (session?.terminalStatus) {
-        handleSendAfterTerminal(text, attachments);
-        return;
+        return handleSendAfterTerminal(text, attachments);
       }
 
-      const onSendFailed = (err: unknown) => {
+      // A turn is running. Queue holds the message locally until it ends;
+      // Steer interrupts the turn and resends right away.
+      const isSteer = !!session?.isPromptPending;
+      if (isSteer && messagingMode === "queue") {
+        useMessageQueueStore.getState().enqueue(taskId, text, attachments);
+        return true;
+      }
+
+      try {
+        if (isSteer) {
+          await sendInterrupting(taskId, text, attachments);
+        } else {
+          await sendPrompt(taskId, text, attachments);
+        }
+        trackPromptSent(text, isSteer);
+        return true;
+      } catch (err) {
         log.error("Failed to send prompt", err);
         Alert.alert(
           "Failed to send",
           "Your message could not be delivered. Please try again.",
         );
-      };
-
-      // A turn is running. Queue holds the message locally until it ends;
-      // Steer interrupts the turn and resends right away.
-      if (session?.isPromptPending) {
-        if (messagingMode === "queue") {
-          useMessageQueueStore.getState().enqueue(taskId, text, attachments);
-          return;
-        }
-        sendInterrupting(taskId, text, attachments)
-          .then(() => trackPromptSent(text, true))
-          .catch(onSendFailed);
-        return;
+        return false;
       }
-
-      sendPrompt(taskId, text, attachments)
-        .then(() => trackPromptSent(text, false))
-        .catch(onSendFailed);
     },
     [
       taskId,

apps/mobile/src/features/tasks/composer/TaskChatComposer.tsx

@@ -59,11 +59,19 @@ import {
 } from "./options";
 import { Pill } from "./Pill";
 import { SelectSheet } from "./SelectSheet";
+import {
+  type ComposerContent,
+  isComposerEmpty,
+  submitComposerMessage,
+} from "./submitComposerMessage";
 
 const log = logger.scope("task-chat-composer");
 
 interface TaskChatComposerProps {
-  onSend: (message: string, attachments: PendingAttachment[]) => void;
+  onSend: (
+    message: string,
+    attachments: PendingAttachment[],
+  ) => Promise<boolean>;
   onStop?: () => void;
   disabled?: boolean;
   placeholder?: string;
@@ -179,6 +187,14 @@ export function TaskChatComposer({
   const [attachments, setAttachments] = useState<PendingAttachment[]>([]);
   const [attachmentSheetOpen, setAttachmentSheetOpen] = useState(false);
 
+  // Mirror composer state into refs so a failed send can read the current
+  // value after awaiting, rather than the value captured when it was sent.
+  const messageRef = useRef(message);
+  messageRef.current = message;
+  const attachmentsRef = useRef(attachments);
+  attachmentsRef.current = attachments;
+  const submissionRef = useRef(0);
+
   useEffect(() => {
     if (!initialMessage) return;
     setMessage(initialMessage);
@@ -206,18 +222,33 @@ export function TaskChatComposer({
 
   const showReasoningPill = modelSupportsReasoning(model);
 
-  const hasContent = message.trim().length > 0 || attachments.length > 0;
+  const hasContent = !isComposerEmpty({ text: message, attachments });
   const canSend = hasContent && !disabled && !isRecording;
   const showStop =
     !isUserTurn && !canSend && !isRecording && !isTranscribing && !!onStop;
 
+  const applyContent = (content: ComposerContent) => {
+    setMessage(content.text);
+    setAttachments(content.attachments);
+  };
+
   const handleSend = () => {
-    const trimmed = message.trim();
     if (!hasContent || disabled) return;
-    setMessage("");
-    setAttachments([]);
+    const submitted: ComposerContent = { text: message.trim(), attachments };
+    const submissionId = ++submissionRef.current;
     Keyboard.dismiss();
-    onSend(trimmed, attachments);
+    void submitComposerMessage({
+      submitted,
+      clear: () => applyContent({ text: "", attachments: [] }),
+      send: () => onSend(submitted.text, submitted.attachments),
+      isLatestSubmission: () => submissionId === submissionRef.current,
+      isEmpty: () =>
+        isComposerEmpty({
+          text: messageRef.current,
+          attachments: attachmentsRef.current,
+        }),
+      restore: applyContent,
+    });
   };
 
   const addAttachment = async (

apps/mobile/src/features/tasks/composer/submitComposerMessage.test.ts

@@ -0,0 +1,133 @@
+import { describe, expect, it, vi } from "vitest";
+import type { PendingAttachment } from "./attachments/types";
+import {
+  type ComposerContent,
+  isComposerEmpty,
+  submitComposerMessage,
+} from "./submitComposerMessage";
+
+const attachment: PendingAttachment = {
+  kind: "image",
+  id: "a1",
+  uri: "file://x.png",
+  fileName: "x.png",
+  mimeType: "image/png",
+};
+
+const submitted: ComposerContent = {
+  text: "hello there",
+  attachments: [attachment],
+};
+
+function createComposer(
+  initial: ComposerContent = { text: "", attachments: [] },
+) {
+  let content = initial;
+  return {
+    get content() {
+      return content;
+    },
+    clear: vi.fn(() => {
+      content = { text: "", attachments: [] };
+    }),
+    restore: vi.fn((next: ComposerContent) => {
+      content = next;
+    }),
+    isEmpty: () => isComposerEmpty(content),
+  };
+}
+
+describe("isComposerEmpty", () => {
+  const cases: Array<[ComposerContent, boolean]> = [
+    [{ text: "", attachments: [] }, true],
+    [{ text: "   ", attachments: [] }, true],
+    [{ text: "hi", attachments: [] }, false],
+    [{ text: "", attachments: [attachment] }, false],
+  ];
+  it.each(cases)("%o -> %s", (content, expected) => {
+    expect(isComposerEmpty(content)).toBe(expected);
+  });
+});
+
+describe("submitComposerMessage", () => {
+  it("clears and stays cleared on a successful send", async () => {
+    const composer = createComposer();
+
+    await submitComposerMessage({
+      submitted,
+      clear: composer.clear,
+      send: async () => true,
+      isLatestSubmission: () => true,
+      isEmpty: composer.isEmpty,
+      restore: composer.restore,
+    });
+
+    expect(composer.clear).toHaveBeenCalledOnce();
+    expect(composer.restore).not.toHaveBeenCalled();
+    expect(composer.content).toEqual({ text: "", attachments: [] });
+  });
+
+  it("restores text and attachments when a send fails", async () => {
+    const composer = createComposer();
+
+    await submitComposerMessage({
+      submitted,
+      clear: composer.clear,
+      send: async () => false,
+      isLatestSubmission: () => true,
+      isEmpty: composer.isEmpty,
+      restore: composer.restore,
+    });
+
+    expect(composer.restore).toHaveBeenCalledWith(submitted);
+    expect(composer.content).toEqual(submitted);
+  });
+
+  it("treats a thrown send as a failure and restores", async () => {
+    const composer = createComposer();
+
+    await submitComposerMessage({
+      submitted,
+      clear: composer.clear,
+      send: async () => {
+        throw new Error("network");
+      },
+      isLatestSubmission: () => true,
+      isEmpty: composer.isEmpty,
+      restore: composer.restore,
+    });
+
+    expect(composer.content).toEqual(submitted);
+  });
+
+  it("does not restore when the user has typed a new draft", async () => {
+    const composer = createComposer();
+    composer.clear.mockImplementation(() => {});
+
+    await submitComposerMessage({
+      submitted,
+      clear: composer.clear,
+      send: async () => false,
+      isLatestSubmission: () => true,
+      isEmpty: () => false,
+      restore: composer.restore,
+    });
+
+    expect(composer.restore).not.toHaveBeenCalled();
+  });
+
+  it("does not restore a stale failure over a newer submission", async () => {
+    const composer = createComposer();
+
+    await submitComposerMessage({
+      submitted,
+      clear: composer.clear,
+      send: async () => false,
+      isLatestSubmission: () => false,
+      isEmpty: composer.isEmpty,
+      restore: composer.restore,
+    });
+
+    expect(composer.restore).not.toHaveBeenCalled();
+  });
+});

apps/mobile/src/features/tasks/composer/submitComposerMessage.ts

@@ -0,0 +1,41 @@
+import type { PendingAttachment } from "./attachments/types";
+
+export interface ComposerContent {
+  text: string;
+  attachments: PendingAttachment[];
+}
+
+export function isComposerEmpty(content: ComposerContent): boolean {
+  return content.text.trim().length === 0 && content.attachments.length === 0;
+}
+
+interface SubmitComposerMessageOptions {
+  submitted: ComposerContent;
+  clear: () => void;
+  send: () => Promise<boolean>;
+  isLatestSubmission: () => boolean;
+  isEmpty: () => boolean;
+  restore: (content: ComposerContent) => void;
+}
+
+export async function submitComposerMessage({
+  submitted,
+  clear,
+  send,
+  isLatestSubmission,
+  isEmpty,
+  restore,
+}: SubmitComposerMessageOptions): Promise<void> {
+  clear();
+
+  let sent = false;
+  try {
+    sent = await send();
+  } catch {
+    sent = false;
+  }
+
+  if (!sent && isLatestSubmission() && isEmpty()) {
+    restore(submitted);
+  }
+}