From 9fdca1bc2b6337ddd2c103c407ebd4d910fba46a Mon Sep 17 00:00:00 2001
From: User <user@example.com>
Date: Thu, 29 Jan 2026 02:09:39 +0000
Subject: [PATCH] feat: add ability to edit queued messages with pause for top
 item

Implements ENG-583: Users can now edit queued messages before they are sent.
When editing the first item in the queue, processing is automatically paused
to prevent the message from being sent while being edited.

Changes:
- Add updateQueueItem, setEditingItem, isItemEditing to message-queue-store
- Add EditQueuedMessageDialog component for editing message content
- Update QueueProcessor to pause when editing first queue item
- Add edit button (pencil icon) to queue item rows in AgentQueueIndicator
- Pass subChatId to AgentQueueIndicator for edit dialog context

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/edit-queued-message-dialog.tsx | 217 ++++++++++++++++++
 .../agents/components/queue-processor.tsx     |  20 ++
 .../features/agents/main/active-chat.tsx      |   1 +
 .../agents/stores/message-queue-store.ts      |  41 ++++
 .../agents/ui/agent-queue-indicator.tsx       |  55 ++++-
 5 files changed, 332 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/features/agents/components/edit-queued-message-dialog.tsx

diff --git a/src/renderer/features/agents/components/edit-queued-message-dialog.tsx b/src/renderer/features/agents/components/edit-queued-message-dialog.tsx
new file mode 100644
index 00000000..26f1df34
--- /dev/null
+++ b/src/renderer/features/agents/components/edit-queued-message-dialog.tsx
@@ -0,0 +1,217 @@
+"use client"
+
+import { AnimatePresence, motion } from "motion/react"
+import { useEffect, useState, useRef, useCallback } from "react"
+import { createPortal } from "react-dom"
+import { Button } from "../../../components/ui/button"
+import { Textarea } from "../../../components/ui/textarea"
+import type { AgentQueueItem } from "../lib/queue-utils"
+import { useMessageQueueStore } from "../stores/message-queue-store"
+
+interface EditQueuedMessageDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  item: AgentQueueItem | null
+  subChatId: string
+  isFirstInQueue?: boolean
+}
+
+const EASING_CURVE = [0.55, 0.055, 0.675, 0.19] as const
+const INTERACTION_DELAY_MS = 250
+
+export function EditQueuedMessageDialog({
+  isOpen,
+  onClose,
+  item,
+  subChatId,
+  isFirstInQueue = false,
+}: EditQueuedMessageDialogProps) {
+  const [mounted, setMounted] = useState(false)
+  const [message, setMessage] = useState("")
+  const openAtRef = useRef<number>(0)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  const updateQueueItem = useMessageQueueStore((s) => s.updateQueueItem)
+  const setEditingItem = useMessageQueueStore((s) => s.setEditingItem)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (isOpen && item) {
+      openAtRef.current = performance.now()
+      setMessage(item.message)
+      // If editing the first item in queue, pause processing
+      if (isFirstInQueue) {
+        setEditingItem(item.id, true)
+      }
+    }
+  }, [isOpen, item, isFirstInQueue, setEditingItem])
+
+  const handleAnimationComplete = () => {
+    if (isOpen) {
+      textareaRef.current?.focus()
+      // Select all text
+      textareaRef.current?.select()
+    }
+  }
+
+  const handleClose = useCallback(() => {
+    const canInteract = performance.now() - openAtRef.current > INTERACTION_DELAY_MS
+    if (!canInteract) return
+    // Clear editing state when closing
+    if (item && isFirstInQueue) {
+      setEditingItem(item.id, false)
+    }
+    onClose()
+  }, [item, isFirstInQueue, setEditingItem, onClose])
+
+  const handleSave = useCallback(() => {
+    const trimmedMessage = message.trim()
+    if (!trimmedMessage || !item) {
+      handleClose()
+      return
+    }
+
+    // Only update if changed
+    if (trimmedMessage !== item.message) {
+      updateQueueItem(subChatId, item.id, { message: trimmedMessage })
+    }
+
+    // Clear editing state
+    if (isFirstInQueue) {
+      setEditingItem(item.id, false)
+    }
+    onClose()
+  }, [message, item, subChatId, updateQueueItem, isFirstInQueue, setEditingItem, onClose, handleClose])
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault()
+        handleClose()
+      }
+      // Cmd/Ctrl + Enter to save
+      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault()
+        handleSave()
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown)
+    return () => document.removeEventListener("keydown", handleKeyDown)
+  }, [isOpen, handleClose, handleSave])
+
+  if (!mounted) return null
+
+  const portalTarget = typeof document !== "undefined" ? document.body : null
+  if (!portalTarget) return null
+
+  const hasAttachments =
+    (item?.images && item.images.length > 0) ||
+    (item?.files && item.files.length > 0) ||
+    (item?.textContexts && item.textContexts.length > 0) ||
+    (item?.diffTextContexts && item.diffTextContexts.length > 0)
+
+  const attachmentCount =
+    (item?.images?.length || 0) +
+    (item?.files?.length || 0) +
+    (item?.textContexts?.length || 0) +
+    (item?.diffTextContexts?.length || 0)
+
+  return createPortal(
+    <AnimatePresence mode="wait" initial={false}>
+      {isOpen && item && (
+        <>
+          {/* Overlay */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{
+              opacity: 1,
+              transition: { duration: 0.18, ease: EASING_CURVE },
+            }}
+            exit={{
+              opacity: 0,
+              pointerEvents: "none" as const,
+              transition: { duration: 0.15, ease: EASING_CURVE },
+            }}
+            className="fixed inset-0 z-[45] bg-black/25"
+            onClick={handleClose}
+            style={{ pointerEvents: "auto" }}
+            data-modal="edit-queued-message"
+          />
+
+          {/* Main Dialog */}
+          <div className="fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-[46] pointer-events-none">
+            <motion.div
+              initial={{ scale: 0.95, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.95, opacity: 0 }}
+              transition={{ duration: 0.2, ease: EASING_CURVE }}
+              onAnimationComplete={handleAnimationComplete}
+              className="w-[90vw] max-w-[500px] pointer-events-auto"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="bg-background rounded-2xl border shadow-2xl overflow-hidden" data-canvas-dialog>
+                <div className="p-6">
+                  <h2 className="text-xl font-semibold mb-1">
+                    Edit queued message
+                  </h2>
+                  {isFirstInQueue && (
+                    <p className="text-sm text-muted-foreground mb-4">
+                      Queue processing is paused while editing
+                    </p>
+                  )}
+                  {!isFirstInQueue && (
+                    <p className="text-sm text-muted-foreground mb-4">
+                      Edit the message before it's sent
+                    </p>
+                  )}
+
+                  {/* Textarea for message */}
+                  <Textarea
+                    ref={textareaRef}
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    placeholder="Enter your message..."
+                    className="w-full min-h-[120px] max-h-[300px] text-sm resize-y"
+                  />
+
+                  {/* Attachment info */}
+                  {hasAttachments && (
+                    <p className="text-xs text-muted-foreground mt-2">
+                      {attachmentCount} {attachmentCount === 1 ? "attachment" : "attachments"} will be included
+                    </p>
+                  )}
+                </div>
+
+                {/* Footer with buttons */}
+                <div className="bg-muted p-4 flex justify-between border-t border-border rounded-b-xl">
+                  <Button
+                    onClick={handleClose}
+                    variant="ghost"
+                    className="rounded-md"
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    onClick={handleSave}
+                    variant="default"
+                    disabled={!message.trim()}
+                    className="rounded-md"
+                  >
+                    Save
+                  </Button>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </>
+      )}
+    </AnimatePresence>,
+    portalTarget,
+  )
+}
diff --git a/src/renderer/features/agents/components/queue-processor.tsx b/src/renderer/features/agents/components/queue-processor.tsx
index 992d4b69..271211db 100644
--- a/src/renderer/features/agents/components/queue-processor.tsx
+++ b/src/renderer/features/agents/components/queue-processor.tsx
@@ -50,6 +50,12 @@ export function QueueProcessor() {
         return
       }
 
+      // Check if the first item is being edited - pause processing if so
+      const firstItem = queue[0]
+      if (firstItem && useMessageQueueStore.getState().isItemEditing(firstItem.id)) {
+        return
+      }
+
       // Get the Chat object from agentChatStore
       const chat = agentChatStore.get(subChatId)
       if (!chat) {
@@ -164,11 +170,18 @@ export function QueueProcessor() {
     // Check all queues and schedule processing for ready sub-chats
     const checkAllQueues = () => {
       const queues = useMessageQueueStore.getState().queues
+      const editingItemIds = useMessageQueueStore.getState().editingItemIds
 
       for (const subChatId of Object.keys(queues)) {
         const queue = queues[subChatId]
         if (!queue || queue.length === 0) continue
 
+        // Skip if first item is being edited (pause processing)
+        const firstItem = queue[0]
+        if (firstItem && editingItemIds.has(firstItem.id)) {
+          continue
+        }
+
         const status = useStreamingStatusStore.getState().getStatus(subChatId)
 
         // Process when ready, or retry on error status
@@ -194,6 +207,12 @@ export function QueueProcessor() {
       () => checkAllQueues()
     )
 
+    // Subscribe to editing state changes (to resume processing when editing finishes)
+    const unsubscribeEditing = useMessageQueueStore.subscribe(
+      (state) => state.editingItemIds,
+      () => checkAllQueues()
+    )
+
     // Initial check
     checkAllQueues()
 
@@ -201,6 +220,7 @@ export function QueueProcessor() {
     return () => {
       unsubscribeQueue()
       unsubscribeStatus()
+      unsubscribeEditing()
 
       // Clear all timers
       for (const timer of timersRef.current.values()) {
diff --git a/src/renderer/features/agents/main/active-chat.tsx b/src/renderer/features/agents/main/active-chat.tsx
index 5bc5bf06..071f57ff 100644
--- a/src/renderer/features/agents/main/active-chat.tsx
+++ b/src/renderer/features/agents/main/active-chat.tsx
@@ -4110,6 +4110,7 @@ const ChatViewInner = memo(function ChatViewInner({
                   onSendNow={handleSendFromQueue}
                   isStreaming={isStreaming}
                   hasStatusCardBelow={changedFilesForSubChat.length > 0}
+                  subChatId={subChatId}
                 />
               )}
               {/* Status card - bottom card, only when there are changed files */}
diff --git a/src/renderer/features/agents/stores/message-queue-store.ts b/src/renderer/features/agents/stores/message-queue-store.ts
index 137274da..a854843f 100644
--- a/src/renderer/features/agents/stores/message-queue-store.ts
+++ b/src/renderer/features/agents/stores/message-queue-store.ts
@@ -11,6 +11,9 @@ interface MessageQueueState {
   // Map: subChatId -> queue items
   queues: Record<string, AgentQueueItem[]>
 
+  // Track which items are being edited (pauses processing for items at top of queue)
+  editingItemIds: Set<string>
+
   // Actions
   addToQueue: (subChatId: string, item: AgentQueueItem) => void
   removeFromQueue: (subChatId: string, itemId: string) => void
@@ -21,11 +24,17 @@ interface MessageQueueState {
   popItem: (subChatId: string, itemId: string) => AgentQueueItem | null
   // Add item to front of queue (for error recovery)
   prependItem: (subChatId: string, item: AgentQueueItem) => void
+  // Update a queue item (for editing)
+  updateQueueItem: (subChatId: string, itemId: string, updates: Partial<Pick<AgentQueueItem, "message" | "images" | "files" | "textContexts" | "diffTextContexts">>) => void
+  // Track editing state
+  setEditingItem: (itemId: string, isEditing: boolean) => void
+  isItemEditing: (itemId: string) => boolean
 }
 
 export const useMessageQueueStore = create<MessageQueueState>()(
   subscribeWithSelector((set, get) => ({
     queues: {},
+    editingItemIds: new Set<string>(),
 
   addToQueue: (subChatId, item) => {
     set((state) => ({
@@ -92,4 +101,36 @@ export const useMessageQueueStore = create<MessageQueueState>()(
       },
     }))
   },
+
+  // Update a queue item (for editing queued messages)
+  updateQueueItem: (subChatId, itemId, updates) => {
+    set((state) => {
+      const currentQueue = state.queues[subChatId] || []
+      return {
+        queues: {
+          ...state.queues,
+          [subChatId]: currentQueue.map((item) =>
+            item.id === itemId ? { ...item, ...updates } : item
+          ),
+        },
+      }
+    })
+  },
+
+  // Track which item is being edited (prevents processing if at top of queue)
+  setEditingItem: (itemId, isEditing) => {
+    set((state) => {
+      const newEditingIds = new Set(state.editingItemIds)
+      if (isEditing) {
+        newEditingIds.add(itemId)
+      } else {
+        newEditingIds.delete(itemId)
+      }
+      return { editingItemIds: newEditingIds }
+    })
+  },
+
+  isItemEditing: (itemId) => {
+    return get().editingItemIds.has(itemId)
+  },
 })))
diff --git a/src/renderer/features/agents/ui/agent-queue-indicator.tsx b/src/renderer/features/agents/ui/agent-queue-indicator.tsx
index bda8ad3d..8fce5ba8 100644
--- a/src/renderer/features/agents/ui/agent-queue-indicator.tsx
+++ b/src/renderer/features/agents/ui/agent-queue-indicator.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { memo, useState, useCallback, useEffect } from "react"
-import { ChevronDown, ArrowUp, X } from "lucide-react"
+import { ChevronDown, ArrowUp, X, Pencil } from "lucide-react"
 import { motion, AnimatePresence } from "motion/react"
 import {
   Tooltip,
@@ -12,6 +12,7 @@ import { cn } from "../../../lib/utils"
 import type { AgentQueueItem } from "../lib/queue-utils"
 import { RenderFileMentions } from "../mentions/render-file-mentions"
 import { getWindowId } from "../../../contexts/WindowContext"
+import { EditQueuedMessageDialog } from "../components/edit-queued-message-dialog"
 
 // Window-scoped key so each window has its own queue expanded state
 const getQueueExpandedKey = () => `${getWindowId()}:agent-queue-expanded`
@@ -21,10 +22,12 @@ const QueueItemRow = memo(function QueueItemRow({
   item,
   onRemove,
   onSendNow,
+  onEdit,
 }: {
   item: AgentQueueItem
   onRemove?: (itemId: string) => void
   onSendNow?: (itemId: string) => void
+  onEdit?: (item: AgentQueueItem) => void
 }) {
   const handleRemove = useCallback(
     (e: React.MouseEvent) => {
@@ -42,6 +45,14 @@ const QueueItemRow = memo(function QueueItemRow({
     [item.id, onSendNow]
   )
 
+  const handleEdit = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      onEdit?.(item)
+    },
+    [item, onEdit]
+  )
+
   // Get display text - truncate message and show attachment count
   const hasAttachments =
     (item.images && item.images.length > 0) ||
@@ -65,6 +76,19 @@ const QueueItemRow = memo(function QueueItemRow({
         </span>
       )}
       <div className="flex items-center gap-1">
+        {onEdit && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={handleEdit}
+                className="flex-shrink-0 p-1 hover:bg-foreground/10 rounded text-muted-foreground hover:text-foreground transition-all"
+              >
+                <Pencil className="w-3.5 h-3.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="top">Edit</TooltipContent>
+          </Tooltip>
+        )}
         {onSendNow && (
           <Tooltip>
             <TooltipTrigger asChild>
@@ -103,6 +127,8 @@ interface AgentQueueIndicatorProps {
   isStreaming?: boolean
   /** Whether there's a status card below this one - affects border radius */
   hasStatusCardBelow?: boolean
+  /** Sub-chat ID for editing messages */
+  subChatId: string
 }
 
 export const AgentQueueIndicator = memo(function AgentQueueIndicator({
@@ -111,6 +137,7 @@ export const AgentQueueIndicator = memo(function AgentQueueIndicator({
   onSendNow,
   isStreaming = false,
   hasStatusCardBelow = false,
+  subChatId,
 }: AgentQueueIndicatorProps) {
   // Load expanded state from localStorage (window-scoped)
   const [isExpanded, setIsExpanded] = useState(() => {
@@ -119,11 +146,25 @@ export const AgentQueueIndicator = memo(function AgentQueueIndicator({
     return saved !== null ? saved === "true" : true // Default to expanded
   })
 
+  // Edit dialog state
+  const [editingItem, setEditingItem] = useState<AgentQueueItem | null>(null)
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
+
   // Save expanded state to localStorage (window-scoped)
   useEffect(() => {
     localStorage.setItem(getQueueExpandedKey(), String(isExpanded))
   }, [isExpanded])
 
+  const handleEdit = useCallback((item: AgentQueueItem) => {
+    setEditingItem(item)
+    setIsEditDialogOpen(true)
+  }, [])
+
+  const handleCloseEditDialog = useCallback(() => {
+    setIsEditDialogOpen(false)
+    setEditingItem(null)
+  }, [])
+
   if (queue.length === 0) {
     return null
   }
@@ -177,18 +218,28 @@ export const AgentQueueIndicator = memo(function AgentQueueIndicator({
             className="overflow-hidden"
           >
             <div className="border-t border-border max-h-[200px] overflow-y-auto">
-              {queue.map((item) => (
+              {queue.map((item, index) => (
                 <QueueItemRow
                   key={item.id}
                   item={item}
                   onRemove={onRemoveItem}
                   onSendNow={onSendNow}
+                  onEdit={handleEdit}
                 />
               ))}
             </div>
           </motion.div>
         )}
       </AnimatePresence>
+
+      {/* Edit queued message dialog */}
+      <EditQueuedMessageDialog
+        isOpen={isEditDialogOpen}
+        onClose={handleCloseEditDialog}
+        item={editingItem}
+        subChatId={subChatId}
+        isFirstInQueue={editingItem ? queue[0]?.id === editingItem.id : false}
+      />
     </div>
   )
 })