🤖 fix: allow image deletion when editing messages (#1700)

## Summary

When editing a message with attached images, users could not remove
those images - the remove (×) button was hidden.

## Changes

- **Frontend**: Always pass `imageParts` during edit (even if empty) so
the backend knows removals are intentional
- **Backend**: Only preserve original attachments when `imageParts` is
`undefined`, not when it's an explicit empty array
- Enable the remove button in `ImageAttachments` during edit mode
- Update toast message to say "Images cannot be added" (since removal
now works)

## Testing

Tested manually:
1. Sent a message with multiple images attached
2. Clicked "Edit" on that message
3. Deleted one image using the × button
4. Submitted the edit
5. Verified the deleted image was removed and the other image remained

---
_Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking:
`high` • Cost: `$0.88`_

Author: ethanndickson

src/browser/components/ChatInput/index.tsx

@@ -1169,7 +1169,7 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
       // When editing an existing message, we only allow changing the text.
       // Don't preventDefault here so any clipboard text can still paste normally.
       if (editingMessage) {
-        pushToast({ type: "error", message: "Images cannot be changed while editing a message." });
+        pushToast({ type: "error", message: "Images cannot be added while editing a message." });
         return;
       }
 
@@ -1256,7 +1256,7 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
       if (imageFiles.length === 0) return;
 
       if (editingMessage) {
-        pushToast({ type: "error", message: "Images cannot be changed while editing a message." });
+        pushToast({ type: "error", message: "Images cannot be added while editing a message." });
         return;
       }
 
@@ -1750,6 +1750,11 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
       try {
         // Prepare image parts if any
         const imageParts = imageAttachmentsToImageParts(imageAttachments, { validate: true });
+        const sendImageParts = editingMessage
+          ? imageParts
+          : imageParts.length > 0
+            ? imageParts
+            : undefined;
 
         // Prepare reviews data (used for both compaction continueMessage and normal send)
         const reviewsData =
@@ -1816,7 +1821,7 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
             ...sendMessageOptions,
             ...compactionOptions,
             editMessageId: editingMessage?.id,
-            imageParts: imageParts.length > 0 ? imageParts : undefined,
+            imageParts: sendImageParts,
             muxMetadata,
           },
         });
@@ -2204,10 +2209,7 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
           </div>
 
           {/* Image attachments */}
-          <ImageAttachments
-            images={imageAttachments}
-            onRemove={editingMessage ? undefined : handleRemoveImage}
-          />
+          <ImageAttachments images={imageAttachments} onRemove={handleRemoveImage} />
 
           <div className="flex flex-col gap-0.5" data-component="ChatModeToggles">
             {/* Editing indicator - workspace only */}

src/node/services/agentSession.editMessageId.test.ts

@@ -91,6 +91,97 @@ describe("AgentSession.sendMessage (editMessageId)", () => {
     expect(streamMessage.mock.calls).toHaveLength(1);
   });
 
+  it("clears image parts when editing with explicit empty imageParts", async () => {
+    const workspaceId = "ws-test";
+
+    const config = {
+      srcDir: "/tmp",
+      getSessionDir: (_workspaceId: string) => "/tmp",
+    } as unknown as Config;
+
+    const originalMessageId = "user-message-with-image";
+    const originalImageUrl = "data:image/png;base64,AAAA";
+
+    const messages: MuxMessage[] = [
+      createMuxMessage(originalMessageId, "user", "original", { historySequence: 0 }, [
+        { type: "file" as const, mediaType: "image/png", url: originalImageUrl },
+      ]),
+    ];
+    let nextSeq = 1;
+
+    const truncateAfterMessage = mock((_workspaceId: string, _messageId: string) => {
+      void _messageId;
+      return Promise.resolve(Ok(undefined));
+    });
+
+    const appendToHistory = mock((_workspaceId: string, message: MuxMessage) => {
+      message.metadata = { ...(message.metadata ?? {}), historySequence: nextSeq++ };
+      messages.push(message);
+      return Promise.resolve(Ok(undefined));
+    });
+
+    const getHistory = mock((_workspaceId: string): Promise<Result<MuxMessage[], string>> => {
+      return Promise.resolve(Ok([...messages]));
+    });
+
+    const historyService = {
+      truncateAfterMessage,
+      appendToHistory,
+      getHistory,
+    } as unknown as HistoryService;
+
+    const partialService = {
+      commitToHistory: mock((_workspaceId: string) => Promise.resolve(Ok(undefined))),
+    } as unknown as PartialService;
+
+    const aiEmitter = new EventEmitter();
+    const streamMessage = mock((_messages: MuxMessage[]) => {
+      return Promise.resolve(Ok(undefined));
+    });
+    const aiService = Object.assign(aiEmitter, {
+      isStreaming: mock((_workspaceId: string) => false),
+      stopStream: mock((_workspaceId: string) => Promise.resolve(Ok(undefined))),
+      streamMessage: streamMessage as unknown as (
+        ...args: Parameters<AIService["streamMessage"]>
+      ) => Promise<Result<void, SendMessageError>>,
+    }) as unknown as AIService;
+
+    const initStateManager = new EventEmitter() as unknown as InitStateManager;
+
+    const backgroundProcessManager = {
+      cleanup: mock((_workspaceId: string) => Promise.resolve()),
+      setMessageQueued: mock((_workspaceId: string, _queued: boolean) => {
+        void _queued;
+      }),
+    } as unknown as BackgroundProcessManager;
+
+    const session = new AgentSession({
+      workspaceId,
+      config,
+      historyService,
+      partialService,
+      aiService,
+      initStateManager,
+      backgroundProcessManager,
+    });
+
+    const result = await session.sendMessage("edited", {
+      model: "anthropic:claude-3-5-sonnet-latest",
+      editMessageId: originalMessageId,
+      imageParts: [],
+    });
+
+    expect(result.success).toBe(true);
+    expect(truncateAfterMessage.mock.calls).toHaveLength(1);
+    expect(appendToHistory.mock.calls).toHaveLength(1);
+
+    const appendedMessage = appendToHistory.mock.calls[0][1];
+    const appendedFileParts = appendedMessage.parts.filter(
+      (part) => part.type === "file"
+    ) as Array<{ type: "file"; url: string; mediaType: string }>;
+
+    expect(appendedFileParts).toHaveLength(0);
+  });
   it("preserves image parts when editing and imageParts are omitted", async () => {
     const workspaceId = "ws-test";
 

src/node/services/agentSession.ts

@@ -409,10 +409,10 @@ export class AgentSession {
     const trimmedMessage = message.trim();
     const imageParts = options?.imageParts;
 
-    // Edits are implemented as truncate+replace. If the frontend forgets to re-send
-    // imageParts, we should preserve the original message's attachments.
+    // Edits are implemented as truncate+replace. If the frontend omits imageParts,
+    // preserve the original message's attachments.
     let preservedEditImageParts: MuxImagePart[] | undefined;
-    if (options?.editMessageId && (!imageParts || imageParts.length === 0)) {
+    if (options?.editMessageId && imageParts === undefined) {
       const historyResult = await this.historyService.getHistory(this.workspaceId);
       if (historyResult.success) {
         const targetMessage: MuxMessage | undefined = historyResult.data.find(