feat: Implement the ability to queue messages in chat (#621)

#360

Author: charlesvien

apps/twig/src/renderer/features/message-editor/stores/draftStore.ts

@@ -21,6 +21,7 @@ interface DraftState {
   contexts: Record<SessionId, EditorContext>;
   commands: Record<SessionId, AvailableCommand[]>;
   focusRequested: Record<SessionId, number>;
+  pendingContent: Record<SessionId, EditorContent>;
   _hasHydrated: boolean;
 }
 
@@ -39,6 +40,8 @@ export interface DraftActions {
   clearCommands: (sessionId: SessionId) => void;
   requestFocus: (sessionId: SessionId) => void;
   clearFocusRequest: (sessionId: SessionId) => void;
+  setPendingContent: (sessionId: SessionId, content: EditorContent) => void;
+  clearPendingContent: (sessionId: SessionId) => void;
 }
 
 type DraftStore = DraftState & { actions: DraftActions };
@@ -50,6 +53,7 @@ export const useDraftStore = create<DraftStore>()(
       contexts: {},
       commands: {},
       focusRequested: {},
+      pendingContent: {},
       _hasHydrated: false,
 
       actions: {
@@ -110,6 +114,16 @@ export const useDraftStore = create<DraftStore>()(
           set((state) => {
             delete state.focusRequested[sessionId];
           }),
+
+        setPendingContent: (sessionId, content) =>
+          set((state) => {
+            state.pendingContent[sessionId] = content;
+          }),
+
+        clearPendingContent: (sessionId) =>
+          set((state) => {
+            delete state.pendingContent[sessionId];
+          }),
       },
     })),
     {

apps/twig/src/renderer/features/message-editor/tiptap/useDraftSync.ts

@@ -110,6 +110,9 @@ export function useDraftSync(
 
   const draftActions = useDraftStore((s) => s.actions);
   const draft = useDraftStore((s) => s.drafts[sessionId] ?? null);
+  const pendingContent = useDraftStore(
+    (s) => s.pendingContent[sessionId] ?? null,
+  );
   const hasHydrated = useDraftStore((s) => s._hasHydrated);
 
   // Reset restoration flag when sessionId changes (e.g., navigating between tasks)
@@ -149,6 +152,15 @@ export function useDraftSync(
     }
   }, [hasHydrated, draft, editor]);
 
+  // Handle pending content (e.g., restoring queued messages after cancel)
+  useLayoutEffect(() => {
+    if (!editor || !pendingContent) return;
+
+    editor.commands.setContent(editorContentToTiptapJson(pendingContent));
+    editor.commands.focus("end");
+    draftActions.clearPendingContent(sessionId);
+  }, [editor, pendingContent, sessionId, draftActions]);
+
   const saveDraft = useCallback(
     (e: Editor) => {
       // Don't save until store has hydrated from storage

apps/twig/src/renderer/features/message-editor/tiptap/useTiptapEditor.ts

@@ -304,7 +304,7 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
 
   const submit = useCallback(() => {
     if (!editor) return;
-    if (disabled || isLoading) return;
+    if (disabled) return;
 
     const text = editor.getText().trim();
     if (!text) return;
@@ -314,9 +314,15 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
         toast.error("Bash mode is not supported in cloud sessions");
         return;
       }
+      // Bash mode requires immediate execution, can't be queued
+      if (isLoading) {
+        toast.error("Cannot run shell commands while agent is generating");
+        return;
+      }
       const command = text.slice(1).trim();
       if (command) callbackRefs.current.onBashCommand?.(command);
     } else {
+      // Normal prompts can be queued when loading
       const content = draft.getContent();
       callbackRefs.current.onSubmit?.(contentToXml(content));
     }

apps/twig/src/renderer/features/sessions/components/ConversationView.tsx

@@ -2,7 +2,11 @@ import type {
   ContentBlock,
   SessionNotification,
 } from "@agentclientprotocol/sdk";
-import { usePendingPermissionsForTask } from "@features/sessions/stores/sessionStore";
+import {
+  usePendingPermissionsForTask,
+  useQueuedMessagesForTask,
+  useSessionActions,
+} from "@features/sessions/stores/sessionStore";
 import type { SessionUpdate, ToolCall } from "@features/sessions/types";
 import { ArrowDown, XCircle } from "@phosphor-icons/react";
 import { Box, Button, Flex, Text } from "@radix-ui/themes";
@@ -24,6 +28,7 @@ import {
 import { GitActionMessage, parseGitActionMessage } from "./GitActionMessage";
 import { GitActionResult } from "./GitActionResult";
 import { SessionFooter } from "./SessionFooter";
+import { QueuedMessageView } from "./session-update/QueuedMessageView";
 import {
   type RenderItem,
   SessionUpdateView,
@@ -77,6 +82,10 @@ export function ConversationView({
   const pendingPermissions = usePendingPermissionsForTask(taskId ?? "");
   const pendingPermissionsCount = pendingPermissions.size;
 
+  // Get queued messages and actions
+  const queuedMessages = useQueuedMessagesForTask(taskId);
+  const { removeQueuedMessage } = useSessionActions();
+
   const isNearBottomRef = useRef(true);
   const prevItemsLengthRef = useRef(0);
   const prevPendingCountRef = useRef(0);
@@ -140,6 +149,13 @@ export function ConversationView({
               <UserShellExecuteView key={item.id} item={item} />
             ),
           )}
+          {queuedMessages.map((msg) => (
+            <QueuedMessageView
+              key={msg.id}
+              message={msg}
+              onRemove={() => taskId && removeQueuedMessage(taskId, msg.id)}
+            />
+          ))}
         </div>
         <SessionFooter
           isPromptPending={isPromptPending}
@@ -148,6 +164,7 @@ export function ConversationView({
             lastTurn?.isComplete ? lastTurn.durationMs : null
           }
           lastStopReason={lastTurn?.stopReason}
+          queuedCount={queuedMessages.length}
         />
       </div>
       {showScrollButton && (

apps/twig/src/renderer/features/sessions/components/SessionFooter.tsx

@@ -1,4 +1,4 @@
-import { Box, Text } from "@radix-ui/themes";
+import { Box, Flex, Text } from "@radix-ui/themes";
 
 import { formatDuration, GeneratingIndicator } from "./GeneratingIndicator";
 
@@ -7,18 +7,27 @@ interface SessionFooterProps {
   promptStartedAt?: number | null;
   lastGenerationDuration: number | null;
   lastStopReason?: string;
+  queuedCount?: number;
 }
 
 export function SessionFooter({
   isPromptPending,
   promptStartedAt,
   lastGenerationDuration,
   lastStopReason,
+  queuedCount = 0,
 }: SessionFooterProps) {
   if (isPromptPending) {
     return (
       <Box className="pt-3 pb-1">
-        <GeneratingIndicator startedAt={promptStartedAt} />
+        <Flex align="center" gap="2">
+          <GeneratingIndicator startedAt={promptStartedAt} />
+          {queuedCount > 0 && (
+            <Text size="1" color="gray">
+              ({queuedCount} queued)
+            </Text>
+          )}
+        </Flex>
       </Box>
     );
   }

apps/twig/src/renderer/features/sessions/components/session-update/QueuedMessageView.tsx

@@ -0,0 +1,44 @@
+import { MarkdownRenderer } from "@features/editor/components/MarkdownRenderer";
+import type { QueuedMessage } from "@features/sessions/stores/sessionStore";
+import { Clock, X } from "@phosphor-icons/react";
+import { Box, Flex, IconButton, Text, Tooltip } from "@radix-ui/themes";
+
+interface QueuedMessageViewProps {
+  message: QueuedMessage;
+  onRemove: () => void;
+}
+
+export function QueuedMessageView({
+  message,
+  onRemove,
+}: QueuedMessageViewProps) {
+  return (
+    <Box
+      className="border-l-2 border-dashed bg-gray-2 py-2 pr-2 pl-3 opacity-70"
+      style={{ borderColor: "var(--gray-8)" }}
+    >
+      <Flex justify="between" align="start" gap="2">
+        <Box className="flex-1 font-medium [&>*:last-child]:mb-0">
+          <MarkdownRenderer content={message.content} />
+        </Box>
+        <Tooltip content="Remove from queue">
+          <IconButton
+            size="1"
+            variant="ghost"
+            color="gray"
+            onClick={onRemove}
+            className="shrink-0"
+          >
+            <X size={14} />
+          </IconButton>
+        </Tooltip>
+      </Flex>
+      <Flex align="center" gap="1" mt="1">
+        <Clock size={12} className="text-gray-9" />
+        <Text size="1" color="gray">
+          Queued
+        </Text>
+      </Flex>
+    </Box>
+  );
+}