From eb385d7141bee4272f3ee52a5087029ad4ba6d41 Mon Sep 17 00:00:00 2001
From: ethan <ethan@coder.com>
Date: Thu, 13 Nov 2025 17:36:31 +1100
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=A4=96=20feat:=20add=20queued=20messa?=
 =?UTF-8?q?ges=20feature?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Allows users to queue multiple messages while AI is streaming:
- Messages sent during streaming are queued instead of interrupting
- Queued messages auto-send when stream completes
- On stream abort (Ctrl+C), queued messages restore to chat input

Implementation includes:
- MessageQueue service for accumulating text + images + options
- AgentSession integration with stream-end/abort handlers
- QueuedMessage component with edit functionality
- Extended ChatInput to support message restoration
- Full test coverage (27 unit tests + 10 integration tests)

Generated with cmux
---
 src/App.stories.tsx                         |   3 +
 src/browser/api.ts                          |   1 +
 src/components/AIView.tsx                   |  33 +-
 src/components/ChatInput/index.tsx          |  37 +-
 src/components/ChatInput/types.ts           |   2 +
 src/components/CommandPalette.tsx           |   7 +-
 src/components/Messages/MessageRenderer.tsx |   2 +
 src/components/Messages/MessageWindow.tsx   |   4 +-
 src/components/Messages/QueuedMessage.tsx   |  53 ++
 src/constants/events.ts                     |   5 +-
 src/constants/ipc-constants.ts              |   1 +
 src/preload.ts                              |   2 +
 src/services/agentSession.ts                |  62 ++-
 src/services/ipcMain.ts                     |  22 +-
 src/services/messageQueue.test.ts           | 214 +++++++++
 src/services/messageQueue.ts                | 111 +++++
 src/stores/WorkspaceStore.ts                |  51 +-
 src/types/ipc.ts                            |  41 +-
 src/types/message.ts                        |   9 +-
 tests/ipcMain/helpers.ts                    |  19 +-
 tests/ipcMain/queuedMessages.test.ts        | 504 ++++++++++++++++++++
 tests/ipcMain/sendMessage.test.ts           |   6 +-
 22 files changed, 1149 insertions(+), 40 deletions(-)
 create mode 100644 src/components/Messages/QueuedMessage.tsx
 create mode 100644 src/services/messageQueue.test.ts
 create mode 100644 src/services/messageQueue.ts
 create mode 100644 tests/ipcMain/queuedMessages.test.ts

diff --git a/src/App.stories.tsx b/src/App.stories.tsx
index bcae352a3..5651766e6 100644
--- a/src/App.stories.tsx
+++ b/src/App.stories.tsx
@@ -65,6 +65,7 @@ function setupMockAPI(options: {
       sendMessage: () => Promise.resolve({ success: true, data: undefined }),
       resumeStream: () => Promise.resolve({ success: true, data: undefined }),
       interruptStream: () => Promise.resolve({ success: true, data: undefined }),
+      clearQueue: () => Promise.resolve({ success: true, data: undefined }),
       truncateHistory: () => Promise.resolve({ success: true, data: undefined }),
       replaceChatHistory: () => Promise.resolve({ success: true, data: undefined }),
       getInfo: () => Promise.resolve(null),
@@ -655,6 +656,7 @@ export const ActiveWorkspaceWithChat: Story = {
               sendMessage: () => Promise.resolve({ success: true, data: undefined }),
               resumeStream: () => Promise.resolve({ success: true, data: undefined }),
               interruptStream: () => Promise.resolve({ success: true, data: undefined }),
+              clearQueue: () => Promise.resolve({ success: true, data: undefined }),
               truncateHistory: () => Promise.resolve({ success: true, data: undefined }),
               replaceChatHistory: () => Promise.resolve({ success: true, data: undefined }),
               getInfo: () => Promise.resolve(null),
@@ -851,6 +853,7 @@ These tables should render cleanly without any disruptive copy or download actio
               sendMessage: () => Promise.resolve({ success: true, data: undefined }),
               resumeStream: () => Promise.resolve({ success: true, data: undefined }),
               interruptStream: () => Promise.resolve({ success: true, data: undefined }),
+              clearQueue: () => Promise.resolve({ success: true, data: undefined }),
               truncateHistory: () => Promise.resolve({ success: true, data: undefined }),
               replaceChatHistory: () => Promise.resolve({ success: true, data: undefined }),
               getInfo: () => Promise.resolve(null),
diff --git a/src/browser/api.ts b/src/browser/api.ts
index b1f6d637c..c350364d9 100644
--- a/src/browser/api.ts
+++ b/src/browser/api.ts
@@ -225,6 +225,7 @@ const webApi: IPCApi = {
       invokeIPC(IPC_CHANNELS.WORKSPACE_RESUME_STREAM, workspaceId, options),
     interruptStream: (workspaceId, options) =>
       invokeIPC(IPC_CHANNELS.WORKSPACE_INTERRUPT_STREAM, workspaceId, options),
+    clearQueue: (workspaceId) => invokeIPC(IPC_CHANNELS.WORKSPACE_QUEUE_CLEAR, workspaceId),
     truncateHistory: (workspaceId, percentage) =>
       invokeIPC(IPC_CHANNELS.WORKSPACE_TRUNCATE_HISTORY, workspaceId, percentage),
     replaceChatHistory: (workspaceId, summaryMessage) =>
diff --git a/src/components/AIView.tsx b/src/components/AIView.tsx
index c0740836b..4add113d3 100644
--- a/src/components/AIView.tsx
+++ b/src/components/AIView.tsx
@@ -4,6 +4,7 @@ import { MessageRenderer } from "./Messages/MessageRenderer";
 import { InterruptedBarrier } from "./Messages/ChatBarrier/InterruptedBarrier";
 import { StreamingBarrier } from "./Messages/ChatBarrier/StreamingBarrier";
 import { RetryBarrier } from "./Messages/ChatBarrier/RetryBarrier";
+import { QueuedMessage } from "./Messages/QueuedMessage";
 import { PinnedTodoList } from "./PinnedTodoList";
 import { getAutoRetryKey, VIM_ENABLED_KEY } from "@/constants/storage";
 import { ChatInput, type ChatInputAPI } from "./ChatInput/index";
@@ -113,8 +114,28 @@ const AIViewInner: React.FC<AIViewProps> = ({
     setEditingMessage({ id: messageId, content });
   }, []);
 
-  const handleEditLastUserMessage = useCallback(() => {
+  const handleEditQueuedMessage = useCallback(async () => {
+    const queuedMessage = workspaceState?.queuedMessage;
+    if (!queuedMessage) return;
+
+    await window.api.workspace.clearQueue(workspaceId);
+    chatInputAPI.current?.restoreText(queuedMessage.content);
+
+    // Restore images if present
+    if (queuedMessage.imageParts && queuedMessage.imageParts.length > 0) {
+      chatInputAPI.current?.restoreImages(queuedMessage.imageParts);
+    }
+  }, [workspaceId, workspaceState?.queuedMessage, chatInputAPI]);
+
+  const handleEditLastUserMessage = useCallback(async () => {
     if (!workspaceState) return;
+
+    if (workspaceState.queuedMessage) {
+      await handleEditQueuedMessage();
+      return;
+    }
+
+    // Otherwise, edit last user message
     const mergedMessages = mergeConsecutiveStreamErrors(workspaceState.messages);
     const lastUserMessage = [...mergedMessages]
       .reverse()
@@ -131,7 +152,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
         element?.scrollIntoView({ behavior: "smooth", block: "center" });
       });
     }
-  }, [workspaceState, contentRef, setAutoScroll]);
+  }, [workspaceState, contentRef, setAutoScroll, handleEditQueuedMessage]);
 
   const handleCancelEdit = useCallback(() => {
     setEditingMessage(undefined);
@@ -435,6 +456,12 @@ const AIViewInner: React.FC<AIViewProps> = ({
                 }
               />
             )}
+            {workspaceState?.queuedMessage && (
+              <QueuedMessage
+                message={workspaceState.queuedMessage}
+                onEdit={() => void handleEditQueuedMessage()}
+              />
+            )}
           </div>
           {!autoScroll && (
             <button
@@ -471,7 +498,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
           isCompacting={isCompacting}
           editingMessage={editingMessage}
           onCancelEdit={handleCancelEdit}
-          onEditLastUserMessage={handleEditLastUserMessage}
+          onEditLastUserMessage={() => void handleEditLastUserMessage()}
           canInterrupt={canInterrupt}
           onReady={handleChatInputReady}
         />
diff --git a/src/components/ChatInput/index.tsx b/src/components/ChatInput/index.tsx
index af2cf8105..e8f68a6e7 100644
--- a/src/components/ChatInput/index.tsx
+++ b/src/components/ChatInput/index.tsx
@@ -49,6 +49,7 @@ import {
   extractImagesFromDrop,
   processImageFiles,
 } from "@/utils/imageHandling";
+import type { ImagePart } from "@/types/ipc";
 
 import type { ThinkingLevel } from "@/types/thinking";
 import type { MuxFrontendMetadata } from "@/types/message";
@@ -220,6 +221,16 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
     [setInput]
   );
 
+  // Method to restore images to input (used by queued message edit)
+  const restoreImages = useCallback((images: ImagePart[]) => {
+    const attachments: ImageAttachment[] = images.map((img, index) => ({
+      id: `restored-${Date.now()}-${index}`,
+      url: img.url,
+      mediaType: img.mediaType,
+    }));
+    setImageAttachments(attachments);
+  }, []);
+
   // Provide API to parent via callback
   useEffect(() => {
     if (props.onReady) {
@@ -227,9 +238,10 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         focus: focusMessageInput,
         restoreText,
         appendText,
+        restoreImages,
       });
     }
-  }, [props.onReady, focusMessageInput, restoreText, appendText, props]);
+  }, [props.onReady, focusMessageInput, restoreText, appendText, restoreImages, props]);
 
   useEffect(() => {
     const handleGlobalKeyDown = (event: KeyboardEvent) => {
@@ -300,18 +312,27 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
     };
   }, []);
 
-  // Allow external components (e.g., CommandPalette) to insert text
+  // Allow external components (e.g., CommandPalette, Queued message edits) to insert text
   useEffect(() => {
     const handler = (e: Event) => {
-      const detail = (e as CustomEvent).detail as { text?: string } | undefined;
-      if (!detail?.text) return;
-      setInput(detail.text);
-      setTimeout(() => inputRef.current?.focus(), 0);
+      const customEvent = e as CustomEvent<{ text: string; mode?: "append" | "replace"; imageParts?: ImagePart[] }>;
+
+      const { text, mode = "append", imageParts } = customEvent.detail;
+
+      if (mode === "replace") {
+        restoreText(text);
+      } else {
+        appendText(text);
+      }
+
+      if (imageParts && imageParts.length > 0) {
+        restoreImages(imageParts);
+      }
     };
     window.addEventListener(CUSTOM_EVENTS.INSERT_TO_CHAT_INPUT, handler as EventListener);
     return () =>
       window.removeEventListener(CUSTOM_EVENTS.INSERT_TO_CHAT_INPUT, handler as EventListener);
-  }, [setInput]);
+  }, [appendText, restoreText, restoreImages]);
 
   // Allow external components to open the Model Selector
   useEffect(() => {
@@ -830,7 +851,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         : KEYBINDS.INTERRUPT_STREAM_NORMAL;
       hints.push(`${formatKeybind(interruptKeybind)} to interrupt`);
     }
-    hints.push(`${formatKeybind(KEYBINDS.SEND_MESSAGE)} to send`);
+    hints.push(`${formatKeybind(KEYBINDS.SEND_MESSAGE)} to ${canInterrupt ? "queue" : "send"}`);
     hints.push(`${formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)} to change model`);
     hints.push(`/vim to toggle Vim mode (${vimEnabled ? "on" : "off"})`);
 
diff --git a/src/components/ChatInput/types.ts b/src/components/ChatInput/types.ts
index 69da80edd..30fe605a6 100644
--- a/src/components/ChatInput/types.ts
+++ b/src/components/ChatInput/types.ts
@@ -1,9 +1,11 @@
 import type { FrontendWorkspaceMetadata } from "@/types/workspace";
+import type { ImagePart } from "@/types/ipc";
 
 export interface ChatInputAPI {
   focus: () => void;
   restoreText: (text: string) => void;
   appendText: (text: string) => void;
+  restoreImages: (images: ImagePart[]) => void;
 }
 
 // Workspace variant: full functionality for existing workspaces
diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx
index 434e882ef..7975a0685 100644
--- a/src/components/CommandPalette.tsx
+++ b/src/components/CommandPalette.tsx
@@ -192,7 +192,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
             shortcutHint: `${formatKeybind(KEYBINDS.SEND_MESSAGE)} to insert`,
             run: () => {
               const text = s.replacement;
-              window.dispatchEvent(createCustomEvent(CUSTOM_EVENTS.INSERT_TO_CHAT_INPUT, { text }));
+              window.dispatchEvent(
+                createCustomEvent(CUSTOM_EVENTS.INSERT_TO_CHAT_INPUT, {
+                  text,
+                  mode: "append",
+                })
+              );
             },
           })),
         },
diff --git a/src/components/Messages/MessageRenderer.tsx b/src/components/Messages/MessageRenderer.tsx
index 47d45ce6a..aa2ba684c 100644
--- a/src/components/Messages/MessageRenderer.tsx
+++ b/src/components/Messages/MessageRenderer.tsx
@@ -7,11 +7,13 @@ import { ReasoningMessage } from "./ReasoningMessage";
 import { StreamErrorMessage } from "./StreamErrorMessage";
 import { HistoryHiddenMessage } from "./HistoryHiddenMessage";
 import { InitMessage } from "./InitMessage";
+// Note: QueuedMessage is NOT imported here - it's rendered directly in AIView after StreamingBarrier
 
 interface MessageRendererProps {
   message: DisplayedMessage;
   className?: string;
   onEditUserMessage?: (messageId: string, content: string) => void;
+  onEditQueuedMessage?: () => void;
   workspaceId?: string;
   isCompacting?: boolean;
 }
diff --git a/src/components/Messages/MessageWindow.tsx b/src/components/Messages/MessageWindow.tsx
index e2e058629..f7b1e4d55 100644
--- a/src/components/Messages/MessageWindow.tsx
+++ b/src/components/Messages/MessageWindow.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import React, { useState, useMemo } from "react";
-import type { MuxMessage, DisplayedMessage } from "@/types/message";
+import type { MuxMessage, DisplayedMessage, QueuedMessage } from "@/types/message";
 import { HeaderButton } from "../tools/shared/ToolPrimitives";
 import { formatTimestamp } from "@/utils/ui/dateTime";
 import { TooltipWrapper, Tooltip } from "../Tooltip";
@@ -19,7 +19,7 @@ interface MessageWindowProps {
   label: ReactNode;
   borderColor: string;
   backgroundColor?: string;
-  message: MuxMessage | DisplayedMessage;
+  message: MuxMessage | DisplayedMessage | QueuedMessage;
   buttons?: ButtonConfig[];
   kebabMenuItems?: KebabMenuItem[]; // Optional kebab menu items (provide empty array to use kebab with only Show JSON)
   children: ReactNode;
diff --git a/src/components/Messages/QueuedMessage.tsx b/src/components/Messages/QueuedMessage.tsx
new file mode 100644
index 000000000..a08229f8d
--- /dev/null
+++ b/src/components/Messages/QueuedMessage.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import type { QueuedMessage as QueuedMessageType } from "@/types/message";
+import type { ButtonConfig } from "./MessageWindow";
+import { MessageWindow } from "./MessageWindow";
+
+interface QueuedMessageProps {
+  message: QueuedMessageType;
+  className?: string;
+  onEdit?: () => void;
+}
+
+export const QueuedMessage: React.FC<QueuedMessageProps> = ({ message, className, onEdit }) => {
+  const { content } = message;
+
+  const buttons: ButtonConfig[] = onEdit
+    ? [
+        {
+          label: "Edit",
+          onClick: onEdit,
+        },
+      ]
+    : [];
+
+  return (
+    <>
+      <MessageWindow
+        label="queued"
+        borderColor="var(--color-user-border)"
+        message={message}
+        className={className}
+        buttons={buttons}
+      >
+        {content && (
+          <pre className="text-subtle m-0 font-mono text-xs leading-4 break-words whitespace-pre-wrap opacity-90">
+            {content}
+          </pre>
+        )}
+        {message.imageParts && message.imageParts.length > 0 && (
+          <div className="mt-2 flex flex-wrap gap-2">
+            {message.imageParts.map((img, idx) => (
+              <img
+                key={idx}
+                src={img.url}
+                alt={`Attachment ${idx + 1}`}
+                className="border-border-light max-h-[300px] max-w-80 rounded border"
+              />
+            ))}
+          </div>
+        )}
+      </MessageWindow>
+    </>
+  );
+};
diff --git a/src/constants/events.ts b/src/constants/events.ts
index 844d5e3f5..71971094a 100644
--- a/src/constants/events.ts
+++ b/src/constants/events.ts
@@ -6,6 +6,7 @@
  */
 
 import type { ThinkingLevel } from "@/types/thinking";
+import type { ImagePart } from "@/types/ipc";
 
 export const CUSTOM_EVENTS = {
   /**
@@ -16,7 +17,7 @@ export const CUSTOM_EVENTS = {
 
   /**
    * Event to insert text into the chat input
-   * Detail: { text: string }
+   * Detail: { text: string, mode?: "replace" | "append", imageParts?: ImagePart[] }
    */
   INSERT_TO_CHAT_INPUT: "cmux:insertToChatInput",
 
@@ -63,6 +64,8 @@ export interface CustomEventPayloads {
   };
   [CUSTOM_EVENTS.INSERT_TO_CHAT_INPUT]: {
     text: string;
+    mode?: "replace" | "append";
+    imageParts?: ImagePart[];
   };
   [CUSTOM_EVENTS.OPEN_MODEL_SELECTOR]: never; // No payload
   [CUSTOM_EVENTS.RESUME_CHECK_REQUESTED]: {
diff --git a/src/constants/ipc-constants.ts b/src/constants/ipc-constants.ts
index dab77a1b6..953712be9 100644
--- a/src/constants/ipc-constants.ts
+++ b/src/constants/ipc-constants.ts
@@ -25,6 +25,7 @@ export const IPC_CHANNELS = {
   WORKSPACE_SEND_MESSAGE: "workspace:sendMessage",
   WORKSPACE_RESUME_STREAM: "workspace:resumeStream",
   WORKSPACE_INTERRUPT_STREAM: "workspace:interruptStream",
+  WORKSPACE_QUEUE_CLEAR: "workspace:queue:clear",
   WORKSPACE_TRUNCATE_HISTORY: "workspace:truncateHistory",
   WORKSPACE_REPLACE_HISTORY: "workspace:replaceHistory",
   WORKSPACE_STREAM_HISTORY: "workspace:streamHistory",
diff --git a/src/preload.ts b/src/preload.ts
index 72da5c01e..3c38a2b47 100644
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -74,6 +74,8 @@ const api: IPCApi = {
       ipcRenderer.invoke(IPC_CHANNELS.WORKSPACE_RESUME_STREAM, workspaceId, options),
     interruptStream: (workspaceId: string, options?: { abandonPartial?: boolean }) =>
       ipcRenderer.invoke(IPC_CHANNELS.WORKSPACE_INTERRUPT_STREAM, workspaceId, options),
+    clearQueue: (workspaceId: string) =>
+      ipcRenderer.invoke(IPC_CHANNELS.WORKSPACE_QUEUE_CLEAR, workspaceId),
     truncateHistory: (workspaceId, percentage) =>
       ipcRenderer.invoke(IPC_CHANNELS.WORKSPACE_TRUNCATE_HISTORY, workspaceId, percentage),
     replaceChatHistory: (workspaceId, summaryMessage) =>
diff --git a/src/services/agentSession.ts b/src/services/agentSession.ts
index c5bfe08a8..f8e9ab49f 100644
--- a/src/services/agentSession.ts
+++ b/src/services/agentSession.ts
@@ -16,11 +16,8 @@ import type { Result } from "@/types/result";
 import { Ok, Err } from "@/types/result";
 import { enforceThinkingPolicy } from "@/utils/thinking/policy";
 import { createRuntime } from "@/runtime/runtimeFactory";
-
-interface ImagePart {
-  url: string;
-  mediaType: string;
-}
+import { MessageQueue } from "@/services/messageQueue";
+import type { ImagePart } from "@/types/ipc";
 
 export interface AgentSessionChatEvent {
   workspaceId: string;
@@ -54,6 +51,7 @@ export class AgentSession {
   private readonly initListeners: Array<{ event: string; handler: (...args: unknown[]) => void }> =
     [];
   private disposed = false;
+  private readonly messageQueue = new MessageQueue();
 
   constructor(options: AgentSessionOptions) {
     assert(options, "AgentSession requires options");
@@ -403,13 +401,41 @@ export class AgentSession {
 
     forward("stream-start", (payload) => this.emitChatEvent(payload));
     forward("stream-delta", (payload) => this.emitChatEvent(payload));
-    forward("stream-end", (payload) => this.emitChatEvent(payload));
     forward("tool-call-start", (payload) => this.emitChatEvent(payload));
     forward("tool-call-delta", (payload) => this.emitChatEvent(payload));
     forward("tool-call-end", (payload) => this.emitChatEvent(payload));
     forward("reasoning-delta", (payload) => this.emitChatEvent(payload));
     forward("reasoning-end", (payload) => this.emitChatEvent(payload));
-    forward("stream-abort", (payload) => this.emitChatEvent(payload));
+
+    forward("stream-end", (payload) => {
+      this.emitChatEvent(payload);
+      // Stream end: auto-send queued messages
+      if (!this.messageQueue.isEmpty()) {
+        const { message, options } = this.messageQueue.produceMessage();
+        this.messageQueue.clear();
+        this.emitQueuedMessageChanged();
+
+        void this.sendMessage(message, options);
+      }
+    });
+
+    forward("stream-abort", (payload) => {
+      this.emitChatEvent(payload);
+      // Stream aborted: restore queued messages to input
+      if (!this.messageQueue.isEmpty()) {
+        const displayText = this.messageQueue.getDisplayText();
+        const imageParts = this.messageQueue.getImageParts();
+        this.messageQueue.clear();
+        this.emitQueuedMessageChanged();
+
+        this.emitChatEvent({
+          type: "restore-to-input",
+          workspaceId: this.workspaceId,
+          text: displayText,
+          imageParts: imageParts,
+        });
+      }
+    });
 
     const errorHandler = (...args: unknown[]) => {
       const [raw] = args;
@@ -476,6 +502,28 @@ export class AgentSession {
     } satisfies AgentSessionChatEvent);
   }
 
+  queueMessage(message: string, options?: SendMessageOptions & { imageParts?: ImagePart[] }): void {
+    this.assertNotDisposed("queueMessage");
+    this.messageQueue.add(message, options);
+    this.emitQueuedMessageChanged();
+  }
+
+  clearQueue(): void {
+    this.assertNotDisposed("clearQueue");
+    this.messageQueue.clear();
+    this.emitQueuedMessageChanged();
+  }
+
+  private emitQueuedMessageChanged(): void {
+    this.emitChatEvent({
+      type: "queued-message-changed",
+      workspaceId: this.workspaceId,
+      queuedMessages: this.messageQueue.getMessages(),
+      displayText: this.messageQueue.getDisplayText(),
+      imageParts: this.messageQueue.getImageParts(),
+    });
+  }
+
   private assertNotDisposed(operation: string): void {
     assert(!this.disposed, `AgentSession.${operation} called after dispose`);
   }
diff --git a/src/services/ipcMain.ts b/src/services/ipcMain.ts
index 559c94711..8f6bcfdcc 100644
--- a/src/services/ipcMain.ts
+++ b/src/services/ipcMain.ts
@@ -17,7 +17,7 @@ import { IPC_CHANNELS, getChatChannel } from "@/constants/ipc-constants";
 import { SUPPORTED_PROVIDERS } from "@/constants/providers";
 import { DEFAULT_RUNTIME_CONFIG } from "@/constants/workspace";
 import type { SendMessageError } from "@/types/errors";
-import type { SendMessageOptions, DeleteMessage } from "@/types/ipc";
+import type { SendMessageOptions, DeleteMessage, ImagePart } from "@/types/ipc";
 import { Ok, Err } from "@/types/result";
 import { validateWorkspaceName } from "@/utils/validation/workspaceValidation";
 import type { WorkspaceMetadata, FrontendWorkspaceMetadata } from "@/types/workspace";
@@ -866,7 +866,7 @@ export class IpcMain {
         workspaceId: string | null,
         message: string,
         options?: SendMessageOptions & {
-          imageParts?: Array<{ url: string; mediaType: string }>;
+          imageParts?: ImagePart[];
           runtimeConfig?: RuntimeConfig;
           projectPath?: string;
           trunkBranch?: string;
@@ -899,6 +899,12 @@ export class IpcMain {
           // Update recency on user message (fire and forget)
           void this.extensionMetadata.updateRecency(workspaceId);
 
+          // Queue new messages during streaming, but allow edits through
+          if (this.aiService.isStreaming(workspaceId) && !options?.editMessageId) {
+            session.queueMessage(message, options);
+            return Ok(undefined);
+          }
+
           const result = await session.sendMessage(message, options);
           if (!result.success) {
             log.error("sendMessage handler: session returned error", {
@@ -977,6 +983,18 @@ export class IpcMain {
       }
     );
 
+    ipcMain.handle(IPC_CHANNELS.WORKSPACE_QUEUE_CLEAR, (_event, workspaceId: string) => {
+      try {
+        const session = this.getOrCreateSession(workspaceId);
+        session.clearQueue();
+        return { success: true };
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        log.error("Unexpected error in clearQueue handler:", error);
+        return { success: false, error: `Failed to clear queue: ${errorMessage}` };
+      }
+    });
+
     ipcMain.handle(
       IPC_CHANNELS.WORKSPACE_TRUNCATE_HISTORY,
       async (_event, workspaceId: string, percentage?: number) => {
diff --git a/src/services/messageQueue.test.ts b/src/services/messageQueue.test.ts
new file mode 100644
index 000000000..fe03aaa51
--- /dev/null
+++ b/src/services/messageQueue.test.ts
@@ -0,0 +1,214 @@
+import { describe, it, expect, beforeEach } from "bun:test";
+import { MessageQueue } from "./messageQueue";
+import type { SendMessageOptions } from "@/types/ipc";
+import type { MuxFrontendMetadata } from "@/types/message";
+
+describe("MessageQueue", () => {
+  let queue: MessageQueue;
+
+  beforeEach(() => {
+    queue = new MessageQueue();
+  });
+
+  describe("getDisplayText", () => {
+    it("should return joined messages for normal messages", () => {
+      queue.add("First message");
+      queue.add("Second message");
+
+      expect(queue.getDisplayText()).toBe("First message\nSecond message");
+    });
+
+    it("should return rawCommand for compaction request", () => {
+      const metadata: MuxFrontendMetadata = {
+        type: "compaction-request",
+        rawCommand: "/compact -t 3000",
+        parsed: { maxOutputTokens: 3000 },
+      };
+
+      const options: SendMessageOptions = {
+        model: "claude-3-5-sonnet-20241022",
+        cmuxMetadata: metadata,
+      };
+
+      queue.add("Summarize this conversation into a compact form...", options);
+
+      expect(queue.getDisplayText()).toBe("/compact -t 3000");
+    });
+
+    it("should return rawCommand even with multiple messages if last has compaction metadata", () => {
+      queue.add("First message");
+
+      const metadata: MuxFrontendMetadata = {
+        type: "compaction-request",
+        rawCommand: "/compact",
+        parsed: {},
+      };
+
+      const options: SendMessageOptions = {
+        model: "claude-3-5-sonnet-20241022",
+        cmuxMetadata: metadata,
+      };
+
+      queue.add("Summarize this conversation...", options);
+
+      // Should use rawCommand from latest options
+      expect(queue.getDisplayText()).toBe("/compact");
+    });
+
+    it("should return joined messages when metadata type is not compaction-request", () => {
+      const metadata: MuxFrontendMetadata = {
+        type: "normal",
+      };
+
+      const options: SendMessageOptions = {
+        model: "claude-3-5-sonnet-20241022",
+        cmuxMetadata: metadata,
+      };
+
+      queue.add("Regular message", options);
+
+      expect(queue.getDisplayText()).toBe("Regular message");
+    });
+
+    it("should return empty string for empty queue", () => {
+      expect(queue.getDisplayText()).toBe("");
+    });
+
+    it("should return joined messages after clearing compaction metadata", () => {
+      const metadata: MuxFrontendMetadata = {
+        type: "compaction-request",
+        rawCommand: "/compact",
+        parsed: {},
+      };
+
+      const options: SendMessageOptions = {
+        model: "claude-3-5-sonnet-20241022",
+        cmuxMetadata: metadata,
+      };
+
+      queue.add("Summarize this...", options);
+      queue.clear();
+      queue.add("New message");
+
+      expect(queue.getDisplayText()).toBe("New message");
+    });
+  });
+
+  describe("getMessages", () => {
+    it("should return raw messages even for compaction requests", () => {
+      const metadata: MuxFrontendMetadata = {
+        type: "compaction-request",
+        rawCommand: "/compact",
+        parsed: {},
+      };
+
+      const options: SendMessageOptions = {
+        model: "claude-3-5-sonnet-20241022",
+        cmuxMetadata: metadata,
+      };
+
+      queue.add("Summarize this conversation...", options);
+
+      // getMessages should return the actual message text for editing
+      expect(queue.getMessages()).toEqual(["Summarize this conversation..."]);
+      // getDisplayText should return the slash command
+      expect(queue.getDisplayText()).toBe("/compact");
+    });
+  });
+
+  describe("getImageParts", () => {
+    it("should return accumulated images from multiple messages", () => {
+      const image1 = { url: "data:image/png;base64,abc", mediaType: "image/png" };
+      const image2 = { url: "data:image/jpeg;base64,def", mediaType: "image/jpeg" };
+      const image3 = { url: "data:image/gif;base64,ghi", mediaType: "image/gif" };
+
+      queue.add("First message", { model: "gpt-4", imageParts: [image1] });
+      queue.add("Second message", { model: "gpt-4", imageParts: [image2, image3] });
+
+      const images = queue.getImageParts();
+      expect(images).toEqual([image1, image2, image3]);
+    });
+
+    it("should return empty array when no images", () => {
+      queue.add("Text only message");
+      expect(queue.getImageParts()).toEqual([]);
+    });
+
+    it("should return copy of images array", () => {
+      const image = { url: "data:image/png;base64,abc", mediaType: "image/png" };
+      queue.add("Message", { model: "gpt-4", imageParts: [image] });
+
+      const images1 = queue.getImageParts();
+      const images2 = queue.getImageParts();
+
+      expect(images1).toEqual(images2);
+      expect(images1).not.toBe(images2); // Different array instances
+    });
+
+    it("should clear images when queue is cleared", () => {
+      const image = { url: "data:image/png;base64,abc", mediaType: "image/png" };
+      queue.add("Message", { model: "gpt-4", imageParts: [image] });
+
+      expect(queue.getImageParts()).toHaveLength(1);
+
+      queue.clear();
+      expect(queue.getImageParts()).toEqual([]);
+    });
+  });
+
+  describe("image-only messages", () => {
+    it("should accept image-only messages (empty text with images)", () => {
+      const image = { url: "data:image/png;base64,abc", mediaType: "image/png" };
+      queue.add("", { model: "gpt-4", imageParts: [image] });
+
+      expect(queue.getMessages()).toEqual([]);
+      expect(queue.getImageParts()).toEqual([image]);
+      expect(queue.isEmpty()).toBe(false);
+    });
+
+    it("should reject messages with empty text and no images", () => {
+      queue.add("", { model: "gpt-4" });
+
+      expect(queue.isEmpty()).toBe(true);
+      expect(queue.getMessages()).toEqual([]);
+      expect(queue.getImageParts()).toEqual([]);
+    });
+
+    it("should handle mixed text and image-only messages", () => {
+      const image1 = { url: "data:image/png;base64,abc", mediaType: "image/png" };
+      const image2 = { url: "data:image/jpeg;base64,def", mediaType: "image/jpeg" };
+
+      queue.add("Text message", { model: "gpt-4", imageParts: [image1] });
+      queue.add("", { model: "gpt-4", imageParts: [image2] }); // Image-only
+
+      expect(queue.getMessages()).toEqual(["Text message"]);
+      expect(queue.getImageParts()).toEqual([image1, image2]);
+      expect(queue.isEmpty()).toBe(false);
+    });
+
+    it("should consider queue non-empty when only images present", () => {
+      const image = { url: "data:image/png;base64,abc", mediaType: "image/png" };
+      queue.add("", { model: "gpt-4", imageParts: [image] });
+
+      expect(queue.isEmpty()).toBe(false);
+    });
+
+    it("should produce correct message for image-only queue", () => {
+      const image = { url: "data:image/png;base64,abc", mediaType: "image/png" };
+      queue.add("", { model: "gpt-4", imageParts: [image] });
+
+      const { message, options } = queue.produceMessage();
+
+      expect(message).toBe("");
+      expect(options?.imageParts).toEqual([image]);
+      expect(options?.model).toBe("gpt-4");
+    });
+
+    it("should return empty string for getDisplayText with image-only", () => {
+      const image = { url: "data:image/png;base64,abc", mediaType: "image/png" };
+      queue.add("", { model: "gpt-4", imageParts: [image] });
+
+      expect(queue.getDisplayText()).toBe("");
+    });
+  });
+});
diff --git a/src/services/messageQueue.ts b/src/services/messageQueue.ts
new file mode 100644
index 000000000..14e68d834
--- /dev/null
+++ b/src/services/messageQueue.ts
@@ -0,0 +1,111 @@
+import type { SendMessageOptions } from "@/types/ipc";
+import type { ImagePart } from "@/types/ipc";
+
+/**
+ * Queue for messages sent during active streaming.
+ *
+ * Stores:
+ * - Message texts (accumulated)
+ * - Latest options (model, thinking level, etc. - overwrites on each add)
+ * - Image parts (accumulated across all messages)
+ */
+export class MessageQueue {
+  private messages: string[] = [];
+  private latestOptions?: SendMessageOptions;
+  private accumulatedImages: ImagePart[] = [];
+
+  /**
+   * Add a message to the queue.
+   * Updates to latest options, accumulates image parts.
+   * Allows image-only messages (empty text with images).
+   */
+  add(message: string, options?: SendMessageOptions & { imageParts?: ImagePart[] }): void {
+    const trimmedMessage = message.trim();
+    const hasImages = options?.imageParts && options.imageParts.length > 0;
+
+    // Reject if both text and images are empty
+    if (trimmedMessage.length === 0 && !hasImages) {
+      return;
+    }
+
+    // Add text message if non-empty
+    if (trimmedMessage.length > 0) {
+      this.messages.push(trimmedMessage);
+    }
+
+    if (options) {
+      const { imageParts, ...restOptions } = options;
+      this.latestOptions = restOptions;
+
+      if (imageParts && imageParts.length > 0) {
+        this.accumulatedImages.push(...imageParts);
+      }
+    }
+  }
+
+  /**
+   * Get all queued message texts (for editing/restoration).
+   */
+  getMessages(): string[] {
+    return [...this.messages];
+  }
+
+  /**
+   * Get display text for queued messages.
+   * Returns rawCommand if this is a compaction request, otherwise joined messages.
+   * Matches StreamingMessageAggregator behavior.
+   */
+  getDisplayText(): string {
+    // Check if we have compaction metadata
+    const cmuxMetadata = this.latestOptions?.cmuxMetadata;
+    if (cmuxMetadata?.type === "compaction-request") {
+      return cmuxMetadata.rawCommand;
+    }
+
+    // Otherwise return joined messages
+    return this.messages.join("\n");
+  }
+
+  /**
+   * Get accumulated image parts for display.
+   */
+  getImageParts(): ImagePart[] {
+    return [...this.accumulatedImages];
+  }
+
+  /**
+   * Get combined message and options for sending.
+   * Returns joined messages with latest options + accumulated images.
+   */
+  produceMessage(): {
+    message: string;
+    options?: SendMessageOptions & { imageParts?: ImagePart[] };
+  } {
+    const joinedMessages = this.messages.join("\n");
+
+    const options = this.latestOptions
+      ? {
+          ...this.latestOptions,
+          imageParts: this.accumulatedImages.length > 0 ? this.accumulatedImages : undefined,
+        }
+      : undefined;
+
+    return { message: joinedMessages, options };
+  }
+
+  /**
+   * Clear all queued messages, options, and images.
+   */
+  clear(): void {
+    this.messages = [];
+    this.latestOptions = undefined;
+    this.accumulatedImages = [];
+  }
+
+  /**
+   * Check if queue is empty (no messages AND no images).
+   */
+  isEmpty(): boolean {
+    return this.messages.length === 0 && this.accumulatedImages.length === 0;
+  }
+}
diff --git a/src/stores/WorkspaceStore.ts b/src/stores/WorkspaceStore.ts
index 2967b69ba..7dc503b57 100644
--- a/src/stores/WorkspaceStore.ts
+++ b/src/stores/WorkspaceStore.ts
@@ -1,5 +1,5 @@
 import assert from "@/utils/assert";
-import type { MuxMessage, DisplayedMessage } from "@/types/message";
+import type { MuxMessage, DisplayedMessage, QueuedMessage } from "@/types/message";
 import { createMuxMessage } from "@/types/message";
 import type { FrontendWorkspaceMetadata } from "@/types/workspace";
 import type { WorkspaceChatMessage } from "@/types/ipc";
@@ -9,7 +9,14 @@ import { updatePersistedState } from "@/hooks/usePersistedState";
 import { getRetryStateKey } from "@/constants/storage";
 import { CUSTOM_EVENTS, createCustomEvent } from "@/constants/events";
 import { useSyncExternalStore } from "react";
-import { isCaughtUpMessage, isStreamError, isDeleteMessage, isMuxMessage } from "@/types/ipc";
+import {
+  isCaughtUpMessage,
+  isStreamError,
+  isDeleteMessage,
+  isMuxMessage,
+  isQueuedMessageChanged,
+  isRestoreToInput,
+} from "@/types/ipc";
 import { MapStore } from "./MapStore";
 import { createDisplayUsage } from "@/utils/tokens/displayUsage";
 import { WorkspaceConsumerManager } from "./WorkspaceConsumerManager";
@@ -23,6 +30,7 @@ import { createFreshRetryState } from "@/utils/messages/retryState";
 export interface WorkspaceState {
   name: string; // User-facing workspace name (e.g., "feature-branch")
   messages: DisplayedMessage[];
+  queuedMessage: QueuedMessage | null;
   canInterrupt: boolean;
   isCompacting: boolean;
   loading: boolean;
@@ -102,6 +110,7 @@ export class WorkspaceStore {
   private historicalMessages = new Map<string, MuxMessage[]>();
   private pendingStreamEvents = new Map<string, WorkspaceChatMessage[]>();
   private workspaceMetadata = new Map<string, FrontendWorkspaceMetadata>(); // Store metadata for name lookup
+  private queuedMessages = new Map<string, QueuedMessage | null>(); // Cached queued messages
 
   /**
    * Map of event types to their handlers. This is the single source of truth for:
@@ -180,6 +189,36 @@ export class WorkspaceStore {
       aggregator.handleReasoningEnd(data as never);
       this.states.bump(workspaceId);
     },
+    "queued-message-changed": (workspaceId, _aggregator, data) => {
+      if (!isQueuedMessageChanged(data)) return;
+
+      // Create QueuedMessage once here instead of on every render
+      // Use displayText which handles slash commands (shows /compact instead of expanded prompt)
+      // Show queued message if there's text OR images (support image-only queued messages)
+      const hasContent = data.queuedMessages.length > 0 || (data.imageParts?.length ?? 0) > 0;
+      const queuedMessage: QueuedMessage | null = hasContent
+        ? {
+            id: `queued-${workspaceId}`,
+            content: data.displayText,
+            imageParts: data.imageParts,
+          }
+        : null;
+
+      this.queuedMessages.set(workspaceId, queuedMessage);
+      this.states.bump(workspaceId);
+    },
+    "restore-to-input": (workspaceId, _aggregator, data) => {
+      if (!isRestoreToInput(data)) return;
+
+      // Use INSERT_TO_CHAT_INPUT event with mode="replace"
+      window.dispatchEvent(
+        createCustomEvent(CUSTOM_EVENTS.INSERT_TO_CHAT_INPUT, {
+          text: data.text,
+          mode: "replace",
+          imageParts: data.imageParts,
+        })
+      );
+    },
     "init-start": (workspaceId, aggregator, data) => {
       aggregator.handleMessage(data);
       this.states.bump(workspaceId);
@@ -293,9 +332,15 @@ export class WorkspaceStore {
       const messages = aggregator.getAllMessages();
       const metadata = this.workspaceMetadata.get(workspaceId);
 
+      // Get base messages from aggregator
+      const displayedMessages = aggregator.getDisplayedMessages();
+
+      const queuedMessage = this.queuedMessages.get(workspaceId) ?? null;
+
       return {
         name: metadata?.name ?? workspaceId, // Fall back to ID if metadata missing
-        messages: aggregator.getDisplayedMessages(),
+        messages: displayedMessages,
+        queuedMessage: queuedMessage,
         canInterrupt: activeStreams.length > 0,
         isCompacting: aggregator.isCompacting(),
         loading: !hasMessages && !isCaughtUp,
diff --git a/src/types/ipc.ts b/src/types/ipc.ts
index 682c0249a..b54b80d3b 100644
--- a/src/types/ipc.ts
+++ b/src/types/ipc.ts
@@ -74,6 +74,23 @@ export type WorkspaceInitEvent =
       timestamp: number;
     };
 
+// Queued message changed event (when messages are queued during streaming)
+export interface QueuedMessageChangedEvent {
+  type: "queued-message-changed";
+  workspaceId: string;
+  queuedMessages: string[]; // Raw messages for editing/restoration
+  displayText: string; // Display text (handles slash commands)
+  imageParts?: ImagePart[]; // Optional image attachments
+}
+
+// Restore to input event (when stream ends/aborts with queued messages)
+export interface RestoreToInputEvent {
+  type: "restore-to-input";
+  workspaceId: string;
+  text: string;
+  imageParts?: ImagePart[]; // Optional image attachments to restore
+}
+
 // Union type for workspace chat messages
 export type WorkspaceChatMessage =
   | MuxMessage
@@ -89,7 +106,9 @@ export type WorkspaceChatMessage =
   | ToolCallEndEvent
   | ReasoningDeltaEvent
   | ReasoningEndEvent
-  | WorkspaceInitEvent;
+  | WorkspaceInitEvent
+  | QueuedMessageChangedEvent
+  | RestoreToInputEvent;
 
 // Type guard for caught up messages
 export function isCaughtUpMessage(msg: WorkspaceChatMessage): msg is CaughtUpMessage {
@@ -151,6 +170,18 @@ export function isReasoningEnd(msg: WorkspaceChatMessage): msg is ReasoningEndEv
   return "type" in msg && msg.type === "reasoning-end";
 }
 
+// Type guard for queued message changed events
+export function isQueuedMessageChanged(
+  msg: WorkspaceChatMessage
+): msg is QueuedMessageChangedEvent {
+  return "type" in msg && msg.type === "queued-message-changed";
+}
+
+// Type guard for restore to input events
+export function isRestoreToInput(msg: WorkspaceChatMessage): msg is RestoreToInputEvent {
+  return "type" in msg && msg.type === "restore-to-input";
+}
+
 // Type guard for MuxMessage (messages with role but no type field)
 export function isMuxMessage(msg: WorkspaceChatMessage): msg is MuxMessage {
   return "role" in msg && !("type" in msg);
@@ -255,7 +286,7 @@ export interface IPCApi {
       workspaceId: string | null,
       message: string,
       options?: SendMessageOptions & {
-        imageParts?: Array<{ url: string; mediaType: string }>;
+        imageParts?: ImagePart[];
         runtimeConfig?: RuntimeConfig;
         projectPath?: string; // Required when workspaceId is null
         trunkBranch?: string; // Optional - trunk branch to branch from (when workspaceId is null)
@@ -272,6 +303,7 @@ export interface IPCApi {
       workspaceId: string,
       options?: { abandonPartial?: boolean }
     ): Promise<Result<void, string>>;
+    clearQueue(workspaceId: string): Promise<Result<void, string>>;
     truncateHistory(workspaceId: string, percentage?: number): Promise<Result<void, string>>;
     replaceChatHistory(
       workspaceId: string,
@@ -321,3 +353,8 @@ export type UpdateStatus =
   | { type: "downloading"; percent: number }
   | { type: "downloaded"; info: { version: string } }
   | { type: "error"; message: string };
+
+export interface ImagePart {
+  url: string; // Data URL (e.g., "data:image/png;base64,...")
+  mediaType: string; // MIME type (e.g., "image/png", "image/jpeg")
+}
diff --git a/src/types/message.ts b/src/types/message.ts
index 0bba91933..e384d72e7 100644
--- a/src/types/message.ts
+++ b/src/types/message.ts
@@ -1,6 +1,7 @@
 import type { UIMessage } from "ai";
 import type { LanguageModelV2Usage } from "@ai-sdk/provider";
 import type { StreamErrorType } from "./errors";
+import type { ImagePart } from "./ipc";
 import type { ToolPolicy } from "@/utils/tools/toolPolicy";
 
 // Parsed compaction request data (shared type for consistency)
@@ -95,7 +96,7 @@ export type DisplayedMessage =
       id: string; // Display ID for UI/React keys
       historyId: string; // Original MuxMessage ID for history operations
       content: string;
-      imageParts?: Array<{ url: string; mediaType?: string }>; // Optional image attachments
+      imageParts?: ImagePart[]; // Optional image attachments
       historySequence: number; // Global ordering across all messages
       timestamp?: number;
       compactionRequest?: {
@@ -178,6 +179,12 @@ export type DisplayedMessage =
       timestamp: number;
     };
 
+export interface QueuedMessage {
+  id: string;
+  content: string;
+  imageParts?: ImagePart[];
+}
+
 // Helper to create a simple text message
 export function createMuxMessage(
   id: string,
diff --git a/tests/ipcMain/helpers.ts b/tests/ipcMain/helpers.ts
index b7e9e2cac..c55d05e38 100644
--- a/tests/ipcMain/helpers.ts
+++ b/tests/ipcMain/helpers.ts
@@ -1,6 +1,7 @@
 import type { IpcRenderer } from "electron";
 import { IPC_CHANNELS, getChatChannel } from "../../src/constants/ipc-constants";
 import type {
+  ImagePart,
   SendMessageOptions,
   WorkspaceChatMessage,
   WorkspaceInitEvent,
@@ -50,7 +51,7 @@ export async function sendMessage(
   mockIpcRenderer: IpcRenderer,
   workspaceId: string,
   message: string,
-  options?: SendMessageOptions & { imageParts?: Array<{ url: string; mediaType: string }> }
+  options?: SendMessageOptions & { imageParts?: ImagePart[] }
 ): Promise<Result<void, SendMessageError>> {
   return (await mockIpcRenderer.invoke(
     IPC_CHANNELS.WORKSPACE_SEND_MESSAGE,
@@ -643,12 +644,16 @@ export async function readChatHistory(
 /**
  * Test image fixtures (1x1 pixel PNGs)
  */
-export const TEST_IMAGES = {
-  RED_PIXEL:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==",
-  BLUE_PIXEL:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg==",
-} as const;
+export const TEST_IMAGES: Record<string, ImagePart> = {
+  RED_PIXEL: {
+    url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==",
+    mediaType: "image/png",
+  },
+  BLUE_PIXEL: {
+    url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg==",
+    mediaType: "image/png",
+  },
+};
 
 /**
  * Wait for a file to NOT exist with retry logic
diff --git a/tests/ipcMain/queuedMessages.test.ts b/tests/ipcMain/queuedMessages.test.ts
new file mode 100644
index 000000000..19ef454b0
--- /dev/null
+++ b/tests/ipcMain/queuedMessages.test.ts
@@ -0,0 +1,504 @@
+import { setupWorkspace, shouldRunIntegrationTests, validateApiKeys } from "./setup";
+import {
+  sendMessageWithModel,
+  sendMessage,
+  createEventCollector,
+  waitFor,
+  TEST_IMAGES,
+} from "./helpers";
+import { IPC_CHANNELS } from "../../src/constants/ipc-constants";
+import type { Result } from "../../src/types/result";
+import type {
+  QueuedMessageChangedEvent,
+  RestoreToInputEvent,
+  WorkspaceChatMessage,
+} from "../../src/types/ipc";
+import { isQueuedMessageChanged, isRestoreToInput } from "../../src/types/ipc";
+import type { EventCollector } from "./helpers";
+
+// Skip all tests if TEST_INTEGRATION is not set
+const describeIntegration = shouldRunIntegrationTests() ? describe : describe.skip;
+
+// Validate API keys before running tests
+if (shouldRunIntegrationTests()) {
+  validateApiKeys(["ANTHROPIC_API_KEY"]);
+}
+
+// Helper: Get queued messages from latest queued-message-changed event
+async function getQueuedMessages(
+  collector: EventCollector,
+  timeoutMs = 5000
+): Promise<string[]> {
+  await waitForQueuedMessageEvent(collector, timeoutMs);
+
+  collector.collect();
+  const events = collector.getEvents();
+  const queuedEvents = events.filter(isQueuedMessageChanged);
+
+  if (queuedEvents.length === 0) {
+    return [];
+  }
+
+  // Return messages from the most recent event
+  const latestEvent = queuedEvents[queuedEvents.length - 1];
+  return latestEvent.queuedMessages;
+}
+
+// Helper: Clear queue via IPC
+async function clearQueuedMessages(
+  mockIpcRenderer: { invoke: (channel: string, ...args: unknown[]) => Promise<unknown> },
+  workspaceId: string
+): Promise<void> {
+  const result = (await mockIpcRenderer.invoke(
+    IPC_CHANNELS.WORKSPACE_QUEUE_CLEAR,
+    workspaceId
+  )) as Result<void, string>;
+
+  if (!result.success) {
+    throw new Error(`Failed to clear queue: ${result.error}`);
+  }
+}
+
+// Helper: Wait for queued-message-changed event
+async function waitForQueuedMessageEvent(
+  collector: EventCollector,
+  timeoutMs = 5000
+): Promise<QueuedMessageChangedEvent | null> {
+  const event = await collector.waitForEvent("queued-message-changed", timeoutMs);
+  if (!event || !isQueuedMessageChanged(event)) {
+    return null;
+  }
+  return event;
+}
+
+// Helper: Wait for restore-to-input event
+async function waitForRestoreToInputEvent(
+  collector: EventCollector,
+  timeoutMs = 5000
+): Promise<RestoreToInputEvent | null> {
+  const event = await collector.waitForEvent("restore-to-input", timeoutMs);
+  if (!event || !isRestoreToInput(event)) {
+    return null;
+  }
+  return event;
+}
+
+describeIntegration("IpcMain queuedMessages integration tests", () => {
+  // Enable retries in CI for flaky API tests
+  if (process.env.CI && typeof jest !== "undefined" && jest.retryTimes) {
+    jest.retryTimes(3, { logErrorsBeforeRetry: true });
+  }
+
+  test.concurrent(
+    "should queue message during streaming and auto-send on stream end",
+    async () => {
+      const { env, workspaceId, cleanup } = await setupWorkspace("anthropic");
+      try {
+        // Start initial stream
+        void sendMessageWithModel(
+          env.mockIpcRenderer,
+          workspaceId,
+          "Say 'FIRST' and nothing else",
+          "anthropic",
+          "claude-sonnet-4-5"
+        );
+
+        const collector1 = createEventCollector(env.sentEvents, workspaceId);
+        await collector1.waitForEvent("stream-start", 5000);
+
+        // Queue a message while streaming
+        const queueResult = await sendMessageWithModel(
+          env.mockIpcRenderer,
+          workspaceId,
+          "Say 'SECOND' and nothing else",
+          "anthropic",
+          "claude-sonnet-4-5"
+        );
+        expect(queueResult.success).toBe(true);
+
+        // Verify message was queued (not sent directly)
+        const queuedEvent = await waitForQueuedMessageEvent(collector1);
+        expect(queuedEvent).toBeDefined();
+        expect(queuedEvent?.queuedMessages).toEqual(["Say 'SECOND' and nothing else"]);
+        expect(queuedEvent?.displayText).toBe("Say 'SECOND' and nothing else");
+
+        // Wait for first stream to complete (this triggers auto-send)
+        await collector1.waitForEvent("stream-end", 15000);
+
+        // Wait for auto-send to emit second user message (happens async after stream-end)
+        const autoSendHappened = await waitFor(() => {
+          collector1.collect();
+          const userMessages = collector1
+            .getEvents()
+            .filter((e) => "role" in e && e.role === "user");
+          return userMessages.length === 2; // First + auto-sent
+        }, 5000);
+        expect(autoSendHappened).toBe(true);
+
+        // Clear events to track second stream separately
+        env.sentEvents.length = 0;
+
+        // Wait for second stream to complete
+        const collector2 = createEventCollector(env.sentEvents, workspaceId);
+        await collector2.waitForEvent("stream-start", 5000);
+        await collector2.waitForEvent("stream-end", 15000);
+
+        // Verify queue was cleared after auto-send
+        const queuedAfter = await getQueuedMessages(collector2);
+        expect(queuedAfter).toEqual([]);
+      } finally {
+        await cleanup();
+      }
+    },
+    30000
+  );
+
+  test.concurrent(
+    "should restore queued message to input on stream abort",
+    async () => {
+      const { env, workspaceId, cleanup } = await setupWorkspace("anthropic");
+      try {
+        // Start a stream
+        void sendMessageWithModel(
+          env.mockIpcRenderer,
+          workspaceId,
+          "Count to 10 slowly",
+          "anthropic",
+          "claude-sonnet-4-5"
+        );
+
+        const collector = createEventCollector(env.sentEvents, workspaceId);
+        await collector.waitForEvent("stream-start", 5000);
+
+        // Queue a message
+        await sendMessageWithModel(
+          env.mockIpcRenderer,
+          workspaceId,
+          "This message should be restored",
+          "anthropic",
+          "claude-sonnet-4-5"
+        );
+
+        // Verify message was queued
+        const queued = await getQueuedMessages(collector);
+        expect(queued).toEqual(["This message should be restored"]);
+
+        // Interrupt the stream
+        const interruptResult = await env.mockIpcRenderer.invoke(
+          IPC_CHANNELS.WORKSPACE_INTERRUPT_STREAM,
+          workspaceId
+        );
+        expect(interruptResult.success).toBe(true);
+
+        // Wait for stream abort
+        await collector.waitForEvent("stream-abort", 5000);
+
+        // Wait for restore-to-input event
+        const restoreEvent = await waitForRestoreToInputEvent(collector);
+        expect(restoreEvent).toBeDefined();
+        expect(restoreEvent?.text).toBe("This message should be restored");
+        expect(restoreEvent?.workspaceId).toBe(workspaceId);
+
+        // Verify queue was cleared
+        const queuedAfter = await getQueuedMessages(collector);
+        expect(queuedAfter).toEqual([]);
+      } finally {
+        await cleanup();
+      }
+    },
+    20000
+  );
+
+  test.concurrent(
+    "should combine multiple queued messages with newline separator",
+    async () => {
+      const { env, workspaceId, cleanup } = await setupWorkspace("anthropic");
+      try {
+        // Start a stream
+        void sendMessageWithModel(
+          env.mockIpcRenderer,
+          workspaceId,
+          "Say 'FIRST' and nothing else",
+          "anthropic",
+          "claude-sonnet-4-5"
+        );
+
+        const collector1 = createEventCollector(env.sentEvents, workspaceId);
+        await collector1.waitForEvent("stream-start", 5000);
+
+        // Queue multiple messages
+        await sendMessage(env.mockIpcRenderer, workspaceId, "Message 1");
+        await sendMessage(env.mockIpcRenderer, workspaceId, "Message 2");
+        await sendMessage(env.mockIpcRenderer, workspaceId, "Message 3");
+
+        // Verify all messages queued
+        const queued = await getQueuedMessages(collector1);
+        expect(queued).toEqual(["Message 1", "Message 2", "Message 3"]);
+
+        // Wait for first stream to complete (this triggers auto-send)
+        await collector1.waitForEvent("stream-end", 15000);
+
+        // Wait for auto-send to emit the combined message
+        const autoSendHappened = await waitFor(() => {
+          collector1.collect();
+          const userMessages = collector1
+            .getEvents()
+            .filter((e) => "role" in e && e.role === "user");
+          return userMessages.length === 2; // First message + auto-sent combined message
+        }, 5000);
+        expect(autoSendHappened).toBe(true);
+      } finally {
+        await cleanup();
+      }
+    },
+    30000
+  );
+
+  test.concurrent(
+    "should auto-send queued message with images",
+    async () => {
+      const { env, workspaceId, cleanup } = await setupWorkspace("anthropic");
+      try {
+        // Start a stream
+        void sendMessageWithModel(
+          env.mockIpcRenderer,
+          workspaceId,
+          "Say 'FIRST' and nothing else",
+          "anthropic",
+          "claude-sonnet-4-5"
+        );
+
+        const collector1 = createEventCollector(env.sentEvents, workspaceId);
+        await collector1.waitForEvent("stream-start", 5000);
+
+        // Queue message with image
+        await sendMessage(env.mockIpcRenderer, workspaceId, "Describe this image", {
+          model: "anthropic:claude-sonnet-4-5",
+          imageParts: [TEST_IMAGES.RED_PIXEL],
+        });
+
+        // Verify queued with image
+        const queuedEvent = await waitForQueuedMessageEvent(collector1);
+        expect(queuedEvent?.queuedMessages).toEqual(["Describe this image"]);
+        expect(queuedEvent?.imageParts).toHaveLength(1);
+        expect(queuedEvent?.imageParts?.[0]).toMatchObject(TEST_IMAGES.RED_PIXEL);
+
+        // Wait for first stream to complete (this triggers auto-send)
+        await collector1.waitForEvent("stream-end", 15000);
+
+        // Wait for auto-send to emit the message with image
+        const autoSendHappened = await waitFor(() => {
+          collector1.collect();
+          const userMessages = collector1
+            .getEvents()
+            .filter((e) => "role" in e && e.role === "user");
+          return userMessages.length === 2;
+        }, 5000);
+        expect(autoSendHappened).toBe(true);
+
+        // Clear events to track second stream separately
+        env.sentEvents.length = 0;
+
+        // Wait for auto-send stream
+        const collector2 = createEventCollector(env.sentEvents, workspaceId);
+        await collector2.waitForEvent("stream-start", 5000);
+        await collector2.waitForEvent("stream-end", 15000);
+
+        // Verify queue was cleared after auto-send
+        const queuedAfter = await getQueuedMessages(collector2);
+        expect(queuedAfter).toEqual([]);
+      } finally {
+        await cleanup();
+      }
+    },
+    30000
+  );
+
+  test.concurrent(
+    "should handle image-only queued message",
+    async () => {
+      const { env, workspaceId, cleanup } = await setupWorkspace("anthropic");
+      try {
+        // Start a stream
+        void sendMessageWithModel(
+          env.mockIpcRenderer,
+          workspaceId,
+          "Say 'FIRST' and nothing else",
+          "anthropic",
+          "claude-sonnet-4-5"
+        );
+
+        const collector1 = createEventCollector(env.sentEvents, workspaceId);
+        await collector1.waitForEvent("stream-start", 5000);
+
+        // Queue image-only message (empty text)
+        await sendMessage(env.mockIpcRenderer, workspaceId, "", {
+          model: "anthropic:claude-sonnet-4-5",
+          imageParts: [TEST_IMAGES.RED_PIXEL],
+        });
+
+        // Verify queued (no text messages, but has image)
+        const queuedEvent = await waitForQueuedMessageEvent(collector1);
+        expect(queuedEvent?.queuedMessages).toEqual([]);
+        expect(queuedEvent?.displayText).toBe("");
+        expect(queuedEvent?.imageParts).toHaveLength(1);
+
+        // Wait for first stream to complete (this triggers auto-send)
+        await collector1.waitForEvent("stream-end", 15000);
+
+        // Wait for auto-send to emit the image-only message
+        const autoSendHappened = await waitFor(() => {
+          collector1.collect();
+          const userMessages = collector1
+            .getEvents()
+            .filter((e) => "role" in e && e.role === "user");
+          return userMessages.length === 2;
+        }, 5000);
+        expect(autoSendHappened).toBe(true);
+
+        // Clear events to track second stream separately
+        env.sentEvents.length = 0;
+
+        // Wait for auto-send stream
+        const collector2 = createEventCollector(env.sentEvents, workspaceId);
+        await collector2.waitForEvent("stream-start", 5000);
+        await collector2.waitForEvent("stream-end", 15000);
+
+        // Verify queue was cleared after auto-send
+        const queuedAfter = await getQueuedMessages(collector2);
+        expect(queuedAfter).toEqual([]);
+      } finally {
+        await cleanup();
+      }
+    },
+    30000
+  );
+
+  test.concurrent(
+    "should preserve latest options when queueing",
+    async () => {
+      const { env, workspaceId, cleanup } = await setupWorkspace("anthropic");
+      try {
+        // Start a stream
+        void sendMessageWithModel(
+          env.mockIpcRenderer,
+          workspaceId,
+          "Say 'FIRST' and nothing else",
+          "anthropic",
+          "claude-sonnet-4-5"
+        );
+
+        const collector1 = createEventCollector(env.sentEvents, workspaceId);
+        await collector1.waitForEvent("stream-start", 5000);
+
+        // Queue messages with different options
+        await sendMessage(env.mockIpcRenderer, workspaceId, "Message 1", {
+          model: "anthropic:claude-haiku-4-5",
+          thinkingLevel: "off",
+        });
+        await sendMessage(env.mockIpcRenderer, workspaceId, "Message 2", {
+          model: "anthropic:claude-sonnet-4-5",
+          thinkingLevel: "high",
+        });
+
+        // Wait for first stream to complete (this triggers auto-send)
+        await collector1.waitForEvent("stream-end", 15000);
+
+        // Wait for auto-send to emit the combined message
+        const autoSendHappened = await waitFor(() => {
+          collector1.collect();
+          const userMessages = collector1
+            .getEvents()
+            .filter((e) => "role" in e && e.role === "user");
+          return userMessages.length === 2;
+        }, 5000);
+        expect(autoSendHappened).toBe(true);
+
+        // Clear events to track second stream separately
+        env.sentEvents.length = 0;
+
+        // Wait for auto-send stream
+        const collector2 = createEventCollector(env.sentEvents, workspaceId);
+        const streamStart = await collector2.waitForEvent("stream-start", 5000);
+
+        if (streamStart && "model" in streamStart) {
+          expect(streamStart.model).toContain("claude-sonnet-4-5");
+        }
+
+        await collector2.waitForEvent("stream-end", 15000);
+      } finally {
+        await cleanup();
+      }
+    },
+    30000
+  );
+
+  test.concurrent(
+    "should preserve compaction metadata when queueing",
+    async () => {
+      const { env, workspaceId, cleanup } = await setupWorkspace("anthropic");
+      try {
+        // Start a stream
+        void sendMessageWithModel(
+          env.mockIpcRenderer,
+          workspaceId,
+          "Say 'FIRST' and nothing else",
+          "anthropic",
+          "claude-sonnet-4-5"
+        );
+
+        const collector1 = createEventCollector(env.sentEvents, workspaceId);
+        await collector1.waitForEvent("stream-start", 5000);
+
+        // Queue a compaction request
+        const compactionMetadata = {
+          type: "compaction-request" as const,
+          rawCommand: "/compact -t 3000",
+          parsed: { maxOutputTokens: 3000 },
+        };
+
+        await sendMessage(
+          env.mockIpcRenderer,
+          workspaceId,
+          "Summarize this conversation into a compact form...",
+          {
+            model: "anthropic:claude-sonnet-4-5",
+            cmuxMetadata: compactionMetadata,
+          }
+        );
+
+        // Wait for queued-message-changed event
+        const queuedEvent = await waitForQueuedMessageEvent(collector1);
+        expect(queuedEvent?.displayText).toBe("/compact -t 3000");
+
+        // Wait for first stream to complete (this triggers auto-send)
+        await collector1.waitForEvent("stream-end", 15000);
+
+        // Wait for auto-send to emit the compaction message
+        const autoSendHappened = await waitFor(() => {
+          collector1.collect();
+          const userMessages = collector1
+            .getEvents()
+            .filter((e) => "role" in e && e.role === "user");
+          return userMessages.length === 2;
+        }, 5000);
+        expect(autoSendHappened).toBe(true);
+
+        // Clear events to track second stream separately
+        env.sentEvents.length = 0;
+
+        // Wait for auto-send stream
+        const collector2 = createEventCollector(env.sentEvents, workspaceId);
+        await collector2.waitForEvent("stream-start", 5000);
+        await collector2.waitForEvent("stream-end", 15000);
+
+        // Verify queue was cleared after auto-send
+        const queuedAfter = await getQueuedMessages(collector2);
+        expect(queuedAfter).toEqual([]);
+      } finally {
+        await cleanup();
+      }
+    },
+    30000
+  );
+});
diff --git a/tests/ipcMain/sendMessage.test.ts b/tests/ipcMain/sendMessage.test.ts
index 544ec8cda..84424bb7c 100644
--- a/tests/ipcMain/sendMessage.test.ts
+++ b/tests/ipcMain/sendMessage.test.ts
@@ -1519,7 +1519,7 @@ describe.each(PROVIDER_CONFIGS)("%s:%s image support", (provider, model) => {
         // Send message with image attachment
         const result = await sendMessage(env.mockIpcRenderer, workspaceId, "What color is this?", {
           model: modelString(provider, model),
-          imageParts: [{ url: TEST_IMAGES.RED_PIXEL, mediaType: "image/png" }],
+          imageParts: [TEST_IMAGES.RED_PIXEL],
         });
 
         expect(result.success).toBe(true);
@@ -1556,7 +1556,7 @@ describe.each(PROVIDER_CONFIGS)("%s:%s image support", (provider, model) => {
         // Send message with image
         const result = await sendMessage(env.mockIpcRenderer, workspaceId, "Describe this", {
           model: modelString(provider, model),
-          imageParts: [{ url: TEST_IMAGES.BLUE_PIXEL, mediaType: "image/png" }],
+          imageParts: [TEST_IMAGES.BLUE_PIXEL],
         });
 
         expect(result.success).toBe(true);
@@ -1576,7 +1576,7 @@ describe.each(PROVIDER_CONFIGS)("%s:%s image support", (provider, model) => {
           const imagePart = userMessage.parts.find((p: { type: string }) => p.type === "file");
           expect(imagePart).toBeDefined();
           if (imagePart) {
-            expect(imagePart.url).toBe(TEST_IMAGES.BLUE_PIXEL);
+            expect(imagePart.url).toBe(TEST_IMAGES.BLUE_PIXEL.url);
             expect(imagePart.mediaType).toBe("image/png");
           }
         }

From 41c5c32083fd88d5d49d1c6451ac99126ed08edd Mon Sep 17 00:00:00 2001
From: ethan <ethan@coder.com>
Date: Fri, 14 Nov 2025 11:59:30 +1100
Subject: [PATCH 2/2] remove superfluous comment

---
 src/components/ChatInput/index.tsx          | 6 +++++-
 src/components/Messages/MessageRenderer.tsx | 1 -
 tests/ipcMain/queuedMessages.test.ts        | 5 +----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ChatInput/index.tsx b/src/components/ChatInput/index.tsx
index e8f68a6e7..63034e34f 100644
--- a/src/components/ChatInput/index.tsx
+++ b/src/components/ChatInput/index.tsx
@@ -315,7 +315,11 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
   // Allow external components (e.g., CommandPalette, Queued message edits) to insert text
   useEffect(() => {
     const handler = (e: Event) => {
-      const customEvent = e as CustomEvent<{ text: string; mode?: "append" | "replace"; imageParts?: ImagePart[] }>;
+      const customEvent = e as CustomEvent<{
+        text: string;
+        mode?: "append" | "replace";
+        imageParts?: ImagePart[];
+      }>;
 
       const { text, mode = "append", imageParts } = customEvent.detail;
 
diff --git a/src/components/Messages/MessageRenderer.tsx b/src/components/Messages/MessageRenderer.tsx
index aa2ba684c..9266f9220 100644
--- a/src/components/Messages/MessageRenderer.tsx
+++ b/src/components/Messages/MessageRenderer.tsx
@@ -7,7 +7,6 @@ import { ReasoningMessage } from "./ReasoningMessage";
 import { StreamErrorMessage } from "./StreamErrorMessage";
 import { HistoryHiddenMessage } from "./HistoryHiddenMessage";
 import { InitMessage } from "./InitMessage";
-// Note: QueuedMessage is NOT imported here - it's rendered directly in AIView after StreamingBarrier
 
 interface MessageRendererProps {
   message: DisplayedMessage;
diff --git a/tests/ipcMain/queuedMessages.test.ts b/tests/ipcMain/queuedMessages.test.ts
index 19ef454b0..eb02b3be0 100644
--- a/tests/ipcMain/queuedMessages.test.ts
+++ b/tests/ipcMain/queuedMessages.test.ts
@@ -25,10 +25,7 @@ if (shouldRunIntegrationTests()) {
 }
 
 // Helper: Get queued messages from latest queued-message-changed event
-async function getQueuedMessages(
-  collector: EventCollector,
-  timeoutMs = 5000
-): Promise<string[]> {
+async function getQueuedMessages(collector: EventCollector, timeoutMs = 5000): Promise<string[]> {
   await waitForQueuedMessageEvent(collector, timeoutMs);
 
   collector.collect();