🤖 feat: make queued indicator clickable to send immediately

- Add sendQueuedImmediately option to interruptStream IPC
- Make QueuedMessage 'Queued' label clickable when stream is active
- Add hover underline effect and tooltip explaining the action
- Clicking interrupts the current stream and sends the queued message

_Generated with mux_

Author: ammar-agent

src/browser/components/AIView.tsx

@@ -245,6 +245,12 @@ const AIViewInner: React.FC<AIViewProps> = ({
     }
   }, [workspaceId, workspaceState?.queuedMessage, chatInputAPI]);
 
+  // Handler for sending queued message immediately (interrupt + send)
+  const handleSendQueuedImmediately = useCallback(async () => {
+    if (!workspaceState?.queuedMessage || !workspaceState.canInterrupt) return;
+    await window.api.workspace.interruptStream(workspaceId, { sendQueuedImmediately: true });
+  }, [workspaceId, workspaceState?.queuedMessage, workspaceState?.canInterrupt]);
+
   const handleEditLastUserMessage = useCallback(async () => {
     if (!workspaceState) return;
 
@@ -562,6 +568,9 @@ const AIViewInner: React.FC<AIViewProps> = ({
                 <QueuedMessage
                   message={workspaceState.queuedMessage}
                   onEdit={() => void handleEditQueuedMessage()}
+                  onSendImmediately={
+                    workspaceState.canInterrupt ? handleSendQueuedImmediately : undefined
+                  }
                 />
               )}
               <ConcurrentLocalWarning

src/browser/components/Messages/QueuedMessage.tsx

@@ -1,17 +1,35 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
 import type { ButtonConfig } from "./MessageWindow";
 import { MessageWindow } from "./MessageWindow";
 import type { QueuedMessage as QueuedMessageType } from "@/common/types/message";
 import { Pencil } from "lucide-react";
+import { Tooltip, TooltipWrapper } from "../Tooltip";
 
 interface QueuedMessageProps {
   message: QueuedMessageType;
   className?: string;
   onEdit?: () => void;
+  onSendImmediately?: () => Promise<void>;
 }
 
-export const QueuedMessage: React.FC<QueuedMessageProps> = ({ message, className, onEdit }) => {
+export const QueuedMessage: React.FC<QueuedMessageProps> = ({
+  message,
+  className,
+  onEdit,
+  onSendImmediately,
+}) => {
   const { content } = message;
+  const [isSending, setIsSending] = useState(false);
+
+  const handleSendImmediately = useCallback(async () => {
+    if (isSending || !onSendImmediately) return;
+    setIsSending(true);
+    try {
+      await onSendImmediately();
+    } finally {
+      setIsSending(false);
+    }
+  }, [isSending, onSendImmediately]);
 
   const buttons: ButtonConfig[] = onEdit
     ? [
@@ -23,10 +41,27 @@ export const QueuedMessage: React.FC<QueuedMessageProps> = ({ message, className
       ]
     : [];
 
+  // Clickable "Queued" label with tooltip
+  const queuedLabel = onSendImmediately ? (
+    <TooltipWrapper inline>
+      <button
+        type="button"
+        onClick={() => void handleSendImmediately()}
+        disabled={isSending}
+        className="cursor-pointer hover:underline disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        Queued
+      </button>
+      <Tooltip align="center">Click to send immediately</Tooltip>
+    </TooltipWrapper>
+  ) : (
+    "Queued"
+  );
+
   return (
     <>
       <MessageWindow
-        label="Queued"
+        label={queuedLabel}
         variant="user"
         message={message}
         className={className}

src/common/types/ipc.ts

@@ -320,7 +320,7 @@ export interface IPCApi {
     ): Promise<Result<void, SendMessageError>>;
     interruptStream(
       workspaceId: string,
-      options?: { abandonPartial?: boolean }
+      options?: { abandonPartial?: boolean; sendQueuedImmediately?: boolean }
     ): Promise<Result<void, string>>;
     clearQueue(workspaceId: string): Promise<Result<void, string>>;
     truncateHistory(workspaceId: string, percentage?: number): Promise<Result<void, string>>;

src/node/services/agentSession.ts

@@ -591,9 +591,9 @@ export class AgentSession {
 
   /**
    * Send queued messages if any exist.
-   * Called when tool execution completes or stream ends.
+   * Called when tool execution completes, stream ends, or user clicks send immediately.
    */
-  private sendQueuedMessages(): void {
+  sendQueuedMessages(): void {
     if (!this.messageQueue.isEmpty()) {
       const { message, options } = this.messageQueue.produceMessage();
       this.messageQueue.clear();

src/node/services/ipcMain.ts

@@ -1281,7 +1281,11 @@ export class IpcMain {
 
     ipcMain.handle(
       IPC_CHANNELS.WORKSPACE_INTERRUPT_STREAM,
-      async (_event, workspaceId: string, options?: { abandonPartial?: boolean }) => {
+      async (
+        _event,
+        workspaceId: string,
+        options?: { abandonPartial?: boolean; sendQueuedImmediately?: boolean }
+      ) => {
         log.debug("interruptStream handler: Received", { workspaceId, options });
         try {
           const session = this.getOrCreateSession(workspaceId);
@@ -1291,7 +1295,12 @@ export class IpcMain {
             return { success: false, error: stopResult.error };
           }
 
-          session.restoreQueueToInput();
+          if (options?.sendQueuedImmediately) {
+            // Send queued messages immediately instead of restoring to input
+            session.sendQueuedMessages();
+          } else {
+            session.restoreQueueToInput();
+          }
 
           return { success: true, data: undefined };
         } catch (error) {