Feature/pause queue (#3077)

e2e-tests/pause_queue.spec.ts

+import { test, Timeout } from "./helpers/test_helper";
+import { expect } from "@playwright/test";
+
+test.describe("pause queue", () => {
+  test.beforeEach(async ({ po }) => {
+    await po.setUp();
+  });
+
+  test("pause queue prevents dequeuing after current stream completes", async ({
+    po,
+  }) => {
+    const page = po.page;
+    const chatInput = po.chatActions.getChatInput();
+
+    await po.sendPrompt("tc=1 [sleep=medium]", { skipWaitForCompletion: true });
+
+    const stopButton = page.getByRole("button", { name: /cancel generation/i });
+    await expect(stopButton).toBeVisible({ timeout: Timeout.MEDIUM });
+
+    for (let i = 1; i <= 4; i++) {
+      await chatInput.fill(`message ${i}`);
+      await chatInput.press("Enter");
+      await expect(page.getByTestId("queue-header")).toContainText(
+        new RegExp(`^${i}\\s+Queued`),
+        {
+          timeout: Timeout.SHORT,
+        },
+      );
+    }
+
+    const queueHeader = page.getByTestId("queue-header");
+    await expect(queueHeader).toContainText(/4\s+Queued/, {
+      timeout: Timeout.SHORT,
+    });
+
+    const pauseButton = queueHeader.getByRole("button", {
+      name: /pause queue/i,
+    });
+    await expect(pauseButton).toBeVisible({ timeout: Timeout.SHORT });
+    await pauseButton.click();
+    await expect(page.getByText("Paused")).toBeVisible();
+
+    await po.chatActions.waitForChatCompletion();
+    await expect(queueHeader).toContainText(/4\s+Queued/);
+  });
+
+  test("stopping while paused keeps queue and resume starts sending", async ({
+    po,
+  }) => {
+    const page = po.page;
+    const chatInput = po.chatActions.getChatInput();
+
+    await po.sendPrompt("tc=1 [sleep=medium]", { skipWaitForCompletion: true });
+
+    const stopButton = page.getByRole("button", { name: /cancel generation/i });
+    await expect(stopButton).toBeVisible({ timeout: Timeout.MEDIUM });
+
+    for (let i = 1; i <= 4; i++) {
+      await chatInput.fill(`queued ${i} [sleep=medium]`);
+      await chatInput.press("Enter");
+    }
+
+    const queueHeader = page.getByTestId("queue-header");
+    await expect(queueHeader).toContainText(/4\s+Queued/, {
+      timeout: Timeout.SHORT,
+    });
+
+    const pauseButton = queueHeader.getByRole("button", {
+      name: /pause queue/i,
+    });
+    await expect(pauseButton).toBeVisible({ timeout: Timeout.SHORT });
+    await pauseButton.click();
+    await expect(page.getByText("Paused")).toBeVisible();
+
+    await stopButton.click();
+    await expect(queueHeader).toContainText(/4\s+Queued/);
+
+    const resumeButton = queueHeader.getByRole("button", {
+      name: /resume queue/i,
+    });
+    await expect(resumeButton).toBeVisible({ timeout: Timeout.SHORT });
+    await resumeButton.click();
+    await expect(page.getByText("Paused")).not.toBeVisible({
+      timeout: Timeout.MEDIUM,
+    });
+
+    await expect
+      .poll(
+        async () => {
+          const text = (await queueHeader.textContent()) ?? "";
+          const match = text.match(/(\d+)\s+Queued/i);
+          return match ? Number(match[1]) : 0;
+        },
+        { timeout: Timeout.LONG },
+      )
+      .toBeLessThan(4);
+  });
+
+  test("sending while stopped with paused queue sends immediately and keeps queue", async ({
+    po,
+  }) => {
+    const page = po.page;
+    const chatInput = po.chatActions.getChatInput();
+
+    await po.sendPrompt("tc=1 [sleep=medium]", { skipWaitForCompletion: true });
+
+    const stopButton = page.getByRole("button", { name: /cancel generation/i });
+    await expect(stopButton).toBeVisible({ timeout: Timeout.MEDIUM });
+
+    for (let i = 1; i <= 3; i++) {
+      await chatInput.fill(`queued ${i} [sleep=medium]`);
+      await chatInput.press("Enter");
+    }
+
+    const queueHeader = page.getByTestId("queue-header");
+    await expect(queueHeader).toContainText(/3\s+Queued/, {
+      timeout: Timeout.SHORT,
+    });
+
+    await queueHeader.getByRole("button", { name: /pause queue/i }).click();
+    await expect(page.getByText("Paused")).toBeVisible();
+
+    await stopButton.click();
+    await expect(queueHeader).toContainText(/3\s+Queued/);
+
+    await chatInput.fill("should send immediately");
+    await chatInput.press("Enter");
+
+    const messagesList = page.getByTestId("messages-list");
+    await expect(messagesList.getByText("should send immediately")).toBeVisible(
+      {
+        timeout: Timeout.SHORT,
+      },
+    );
+    await expect(queueHeader).toContainText(/3\s+Queued/);
+    await expect(page.getByText("Paused")).toBeVisible();
+  });
+});

src/atoms/chatAtoms.ts

@@ -260,3 +260,6 @@ export const queuedMessagesByIdAtom = atom<Map<number, QueuedMessageItem[]>>(
 export const streamCompletedSuccessfullyByIdAtom = atom<Map<number, boolean>>(
   new Map(),
 );
+
+// Tracks if the queue is paused for each chat (Map<chatId, isPaused>)
+export const queuePausedByIdAtom = atom<Map<number, boolean>>(new Map());

src/components/chat/ChatInput.tsx

@@ -127,6 +127,11 @@ export function ChatInput({ chatId }: { chatId?: number }) {
     removeQueuedMessage,
     reorderQueuedMessages,
     clearAllQueuedMessages,
+    isPaused,
+    pauseQueue,
+    clearPauseOnly,
+    resumeQueue,
+    clearCompletionFlag,
   } = useStreamChat();
   const [showError, setShowError] = useState(true);
   const [isApproving, setIsApproving] = useState(false); // State for approving
@@ -358,6 +363,14 @@ export function ChatInput({ chatId }: { chatId?: number }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Auto-clear pause state when queue becomes empty (Users expect that deleting all queued messages returns them to normal send mode)
+
+  useEffect(() => {
+    if (chatId && isPaused && queuedMessages.length === 0) {
+      clearPauseOnly();
+    }
+  }, [chatId, isPaused, queuedMessages.length, clearPauseOnly]);
+
   // Queue management handlers
   const handleEditQueuedMessage = useCallback(
     (id: string) => {
@@ -510,7 +523,8 @@ export function ChatInput({ chatId }: { chatId?: number }) {
       return;
     }
 
-    // If streaming, queue the message instead of sending immediately
+    // Queue while actively streaming. If we're paused but currently idle,
+    // send the new message immediately and keep existing queued items paused.
     if (isStreaming) {
       const queued = queueMessage({
         prompt: currentInput,
@@ -561,17 +575,17 @@ export function ChatInput({ chatId }: { chatId?: number }) {
   };
 
   const handleCancel = () => {
-    // Clear all queued messages first, BEFORE the IPC call, to ensure
-    // the queue is empty even if the backend response arrives quickly.
-    // This prevents race conditions where the queue-processing effect
-    // could potentially run if the backend responds before queue clearing.
-    clearAllQueuedMessages();
-    // Reset editing state so the "Editing queued message" banner is dismissed
-    // and restored attachments/components are cleared
+    // Only clear the queue if NOT paused
+    if (!isPaused) {
+      clearAllQueuedMessages();
+    }
+    // Always reset editing state when cancelling, regardless of pause state
     if (editingQueuedMessageId) {
       resetEditingState();
     }
+    // Do NOT reset pause state here; queued messages should remain paused after stopping
     if (chatId) {
+      clearCompletionFlag();
       ipc.chat.cancelStream(chatId);
     }
     setIsStreaming(false);
@@ -760,6 +774,9 @@ export function ChatInput({ chatId }: { chatId?: number }) {
               onMoveDown={handleMoveDown}
               isStreaming={isStreaming}
               hasError={!!error}
+              isPaused={isPaused}
+              onPauseQueue={pauseQueue}
+              onResumeQueue={resumeQueue}
             />
           )}
           {/* Show editing indicator when editing a queued message */}

src/components/chat/QueuedMessagesList.tsx

@@ -9,6 +9,8 @@ import {
   ArrowUp,
   ArrowDown,
   Paperclip,
+  PlayIcon,
+  PauseIcon,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 
@@ -20,6 +22,9 @@ interface QueuedMessagesListProps {
   onMoveDown: (id: string) => void;
   isStreaming: boolean;
   hasError: boolean;
+  isPaused: boolean;
+  onPauseQueue: () => void;
+  onResumeQueue: () => void;
 }
 
 interface QueuedMessageItemRowProps {
@@ -106,6 +111,9 @@ export function QueuedMessagesList({
   onMoveDown,
   isStreaming,
   hasError,
+  isPaused,
+  onPauseQueue,
+  onResumeQueue,
 }: QueuedMessagesListProps) {
   const [isExpanded, setIsExpanded] = useState(true);
 
@@ -118,25 +126,70 @@ export function QueuedMessagesList({
       : "ready to send";
 
   return (
-    <div className="border-b border-border bg-muted/30">
-      <button
-        type="button"
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="w-full flex items-center justify-between px-3 py-2 hover:bg-muted/50 transition-colors"
-      >
-        <div className="flex items-center gap-2.5 min-w-0 flex-1">
+    <div
+      data-testid="queue-header"
+      className={cn(
+        "border-b border-border bg-muted/30",
+        isPaused && "bg-yellow-500/10 border-yellow-500/50",
+      )}
+    >
+      <div className="w-full flex items-center justify-between px-3 py-2">
+        {/* Make left header area clickable for expand/collapse */}
+        <div
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setIsExpanded((v) => !v);
+            }
+          }}
+          className="flex items-center gap-2.5 min-w-0 flex-1 cursor-pointer select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+          onClick={() => setIsExpanded((v) => !v)}
+          title={isExpanded ? "Collapse" : "Expand"}
+        >
           <ListOrdered className="w-4 h-4 text-muted-foreground flex-shrink-0" />
           <span className="text-sm">{messages.length} Queued</span>
-          <span className="text-xs text-muted-foreground">- {statusText}</span>
+          {!isPaused && (
+            <span className="text-xs text-muted-foreground">
+              - {statusText}
+            </span>
+          )}
+          {isPaused && (
+            <span className="text-xs px-2 py-0.5 rounded bg-yellow-500/20 text-yellow-700 dark:text-yellow-400 font-medium">
+              Paused
+            </span>
+          )}
         </div>
         <div className="flex items-center gap-2 flex-shrink-0 ml-3">
-          {isExpanded ? (
-            <ChevronUp className="w-4 h-4 text-muted-foreground" />
-          ) : (
-            <ChevronDown className="w-4 h-4 text-muted-foreground" />
-          )}
+          <button
+            type="button"
+            onClick={isPaused ? onResumeQueue : onPauseQueue}
+            aria-label={isPaused ? "Resume queue" : "Pause queue"}
+            title={isPaused ? "Resume queue" : "Pause queue"}
+            className={cn(
+              "ml-2 px-2 py-1 rounded-lg transition-colors duration-150 cursor-pointer",
+              isPaused
+                ? "bg-yellow-500/20 text-yellow-700 dark:text-yellow-400 hover:bg-yellow-500/30"
+                : "text-muted-foreground hover:text-primary hover:bg-muted/50",
+            )}
+          >
+            {isPaused ? <PlayIcon size={18} /> : <PauseIcon size={18} />}
+          </button>
+          <button
+            type="button"
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="p-1 hover:bg-muted rounded cursor-pointer"
+            title={isExpanded ? "Collapse" : "Expand"}
+          >
+            {isExpanded ? (
+              <ChevronUp className="w-4 h-4 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="w-4 h-4 text-muted-foreground" />
+            )}
+          </button>
         </div>
-      </button>
+      </div>
 
       <div
         className="grid transition-[grid-template-rows] duration-200 ease-in-out"

src/hooks/useQueueProcessor.ts

@@ -3,6 +3,8 @@ import { useAtom } from "jotai";
 import {
   queuedMessagesByIdAtom,
   streamCompletedSuccessfullyByIdAtom,
+  queuePausedByIdAtom,
+  isStreamingByIdAtom,
   type QueuedMessageItem,
 } from "@/atoms/chatAtoms";
 import { useStreamChat } from "./useStreamChat";
@@ -20,6 +22,8 @@ export function useQueueProcessor() {
   );
   const [streamCompletedSuccessfullyById, setStreamCompletedSuccessfullyById] =
     useAtom(streamCompletedSuccessfullyByIdAtom);
+  const [queuePausedById] = useAtom(queuePausedByIdAtom);
+  const [isStreamingById] = useAtom(isStreamingByIdAtom);
   const posthog = usePostHog();
   const { settings } = useSettings();
 
@@ -28,8 +32,16 @@ export function useQueueProcessor() {
     for (const [chatId, queuedMessages] of queuedMessagesById) {
       if (queuedMessages.length === 0) continue;
 
+      const isPaused = queuePausedById.get(chatId) ?? false;
+      if (isPaused) continue;
+
+      const isStreaming = isStreamingById.get(chatId) ?? false;
+      // Never dequeue while a stream is active for this chat
+      if (isStreaming) continue;
+
       const completedSuccessfully =
         streamCompletedSuccessfullyById.get(chatId) ?? false;
+      // Only dequeue if the previous stream completed successfully
       if (!completedSuccessfully) continue;
 
       // Clear the successful completion flag first to prevent loops
@@ -74,6 +86,8 @@ export function useQueueProcessor() {
   }, [
     queuedMessagesById,
     streamCompletedSuccessfullyById,
+    queuePausedById,
+    isStreamingById,
     streamMessage,
     setQueuedMessagesById,
     setStreamCompletedSuccessfullyById,

src/hooks/useStreamChat.ts

@@ -13,6 +13,7 @@ import {
   recentStreamChatIdsAtom,
   queuedMessagesByIdAtom,
   streamCompletedSuccessfullyByIdAtom,
+  queuePausedByIdAtom,
   type QueuedMessageItem,
 } from "@/atoms/chatAtoms";
 import { ipc } from "@/ipc/types";
@@ -69,6 +70,8 @@ export function useStreamChat({
   const setStreamCompletedSuccessfullyById = useSetAtom(
     streamCompletedSuccessfullyByIdAtom,
   );
+  const queuePausedById = useAtomValue(queuePausedByIdAtom);
+  const setQueuePausedById = useSetAtom(queuePausedByIdAtom);
 
   const posthog = usePostHog();
   const queryClient = useQueryClient();
@@ -402,34 +405,10 @@ export function useStreamChat({
     ],
   );
 
-  return {
-    streamMessage,
-    isStreaming:
-      hasChatId && chatId !== undefined
-        ? (isStreamingById.get(chatId) ?? false)
-        : false,
-    error:
-      hasChatId && chatId !== undefined
-        ? (errorById.get(chatId) ?? null)
-        : null,
-    setError: (value: string | null) =>
-      setErrorById((prev) => {
-        const next = new Map(prev);
-        if (chatId !== undefined) next.set(chatId, value);
-        return next;
-      }),
-    setIsStreaming: (value: boolean) =>
-      setIsStreamingById((prev) => {
-        const next = new Map(prev);
-        if (chatId !== undefined) next.set(chatId, value);
-        return next;
-      }),
-    // Multi-message queue support
-    queuedMessages:
-      hasChatId && chatId !== undefined
-        ? (queuedMessagesById.get(chatId) ?? [])
-        : [],
-    queueMessage: (message: Omit<QueuedMessageItem, "id">): boolean => {
+  // Memoize queue management functions to prevent unnecessary re-renders
+  // in components that depend on these functions (e.g., restore effect)
+  const queueMessage = useCallback(
+    (message: Omit<QueuedMessageItem, "id">): boolean => {
       if (chatId === undefined) return false;
       const newItem: QueuedMessageItem = {
         ...message,
@@ -443,7 +422,11 @@ export function useStreamChat({
       });
       return true;
     },
-    updateQueuedMessage: (
+    [chatId, setQueuedMessagesById],
+  );
+
+  const updateQueuedMessage = useCallback(
+    (
       id: string,
       updates: Partial<
         Pick<QueuedMessageItem, "prompt" | "attachments" | "selectedComponents">
@@ -460,7 +443,11 @@ export function useStreamChat({
         return next;
       });
     },
-    removeQueuedMessage: (id: string) => {
+    [chatId, setQueuedMessagesById],
+  );
+
+  const removeQueuedMessage = useCallback(
+    (id: string) => {
       if (chatId === undefined) return;
       setQueuedMessagesById((prev) => {
         const next = new Map(prev);
@@ -474,7 +461,11 @@ export function useStreamChat({
         return next;
       });
     },
-    reorderQueuedMessages: (fromIndex: number, toIndex: number) => {
+    [chatId, setQueuedMessagesById],
+  );
+
+  const reorderQueuedMessages = useCallback(
+    (fromIndex: number, toIndex: number) => {
       if (chatId === undefined) return;
       setQueuedMessagesById((prev) => {
         const next = new Map(prev);
@@ -493,13 +484,93 @@ export function useStreamChat({
         return next;
       });
     },
-    clearAllQueuedMessages: () => {
+    [chatId, setQueuedMessagesById],
+  );
+
+  const clearAllQueuedMessages = useCallback(() => {
+    if (chatId === undefined) return;
+    setQueuedMessagesById((prev) => {
+      const next = new Map(prev);
+      next.delete(chatId);
+      return next;
+    });
+  }, [chatId, setQueuedMessagesById]);
+
+  return {
+    streamMessage,
+    isStreaming:
+      hasChatId && chatId !== undefined
+        ? (isStreamingById.get(chatId) ?? false)
+        : false,
+    error:
+      hasChatId && chatId !== undefined
+        ? (errorById.get(chatId) ?? null)
+        : null,
+    setError: (value: string | null) =>
+      setErrorById((prev) => {
+        const next = new Map(prev);
+        if (chatId !== undefined) next.set(chatId, value);
+        return next;
+      }),
+    setIsStreaming: (value: boolean) =>
+      setIsStreamingById((prev) => {
+        const next = new Map(prev);
+        if (chatId !== undefined) next.set(chatId, value);
+        return next;
+      }),
+    // Multi-message queue support
+    queuedMessages:
+      hasChatId && chatId !== undefined
+        ? (queuedMessagesById.get(chatId) ?? [])
+        : [],
+    queueMessage,
+    updateQueuedMessage,
+    removeQueuedMessage,
+    reorderQueuedMessages,
+    clearAllQueuedMessages,
+    isPaused:
+      hasChatId && chatId !== undefined
+        ? (queuePausedById.get(chatId) ?? false)
+        : false,
+    pauseQueue: useCallback(() => {
       if (chatId === undefined) return;
-      setQueuedMessagesById((prev) => {
+      setQueuePausedById((prev) => {
+        const next = new Map(prev);
+        next.set(chatId, true);
+        return next;
+      });
+    }, [chatId, setQueuePausedById]),
+    clearPauseOnly: useCallback(() => {
+      if (chatId === undefined) return;
+      setQueuePausedById((prev) => {
+        const next = new Map(prev);
+        next.set(chatId, false);
+        return next;
+      });
+    }, [chatId, setQueuePausedById]),
+    resumeQueue: useCallback(() => {
+      if (chatId === undefined) return;
+      setQueuePausedById((prev) => {
+        const next = new Map(prev);
+        next.set(chatId, false);
+        return next;
+      });
+      // Signal the queue processor if we're not currently streaming
+      if (!pendingStreamChatIds.has(chatId)) {
+        setStreamCompletedSuccessfullyById((prev) => {
+          const next = new Map(prev);
+          next.set(chatId, true);
+          return next;
+        });
+      }
+    }, [chatId, setQueuePausedById, setStreamCompletedSuccessfullyById]),
+    clearCompletionFlag: useCallback(() => {
+      if (chatId === undefined) return;
+      setStreamCompletedSuccessfullyById((prev) => {
         const next = new Map(prev);
         next.delete(chatId);
         return next;
       });
-    },
+    }, [chatId, setStreamCompletedSuccessfullyById]),
   };
 }