🤖 feat: add queued messages feature

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

Author: ethanndickson

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),

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) =>

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}
         />

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,16 +221,27 @@ 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) {
       props.onReady({
         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 CustomEventType<typeof CUSTOM_EVENTS.INSERT_TO_CHAT_INPUT>;
+
+      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"})`);
 

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

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",
+                })
+              );
             },
           })),
         },

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;
 }

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;

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>
+    </>
+  );
+};

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]: {