diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index bf7c387d3e77..c86d4fb391c8 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -27,7 +27,14 @@ import { COST_TRACKING_ENABLED } from '../updates';
 import { CostTracker } from './bottom_menu/CostTracker';
 import { DroppedFile, useFileDrop } from '../hooks/useFileDrop';
 import { Recipe } from '../recipe';
+import MessageQueue from './MessageQueue';
+import { QueueStorage, QueuedMessage as StoredQueuedMessage } from '../utils/queueStorage';
 
+interface QueuedMessage {
+  id: string;
+  content: string;
+  timestamp: number;
+}
 interface PastedImage {
   id: string;
   dataUrl: string; // For immediate preview
@@ -103,27 +110,43 @@ export default function ChatInput({
   const [displayValue, setDisplayValue] = useState(initialValue); // For immediate visual feedback
   const [isFocused, setIsFocused] = useState(false);
   const [pastedImages, setPastedImages] = useState<PastedImage[]>([]);
+  const [queuedMessages, setQueuedMessages] = useState<Array<{id: string, content: string, timestamp: number}>>(() => {
+    // Load saved queue on component mount
+    return QueueStorage.loadQueue();
+  });
+  const [isComposing, setIsComposing] = useState(false);
 
-  // Derived state - chatState != Idle means we're in some form of loading state
-  const isLoading = chatState !== ChatState.Idle;
-  const { alerts, addAlert, clearAlerts } = useAlerts();
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const toolCount = useToolCount();
-  const { isLoadingCompaction, handleManualCompaction } = useChatContextManager();
-  const { getProviders, read } = useConfig();
-  const { getCurrentModelAndProvider, currentModel, currentProvider } = useModelAndProvider();
-  const [tokenLimit, setTokenLimit] = useState<number>(TOKEN_LIMIT_DEFAULT);
-  const [isTokenLimitLoaded, setIsTokenLimitLoaded] = useState(false);
+  // Save queue to localStorage whenever it changes
 
-  // Draft functionality - get chat context and global draft context
-  // We need to handle the case where ChatInput is used without ChatProvider (e.g., in Hub)
-  const chatContext = useChatContext(); // This should always be available now
-  const draftLoadedRef = useRef(false);
-
-  // Debug logging for draft context
+  // Reset processing state and check queue on mount
+  useEffect(() => {
+    // Reset refs to ensure clean state after navigation
+    queuePausedRef.current = false;
+    editingMessageIdRef.current = null;
+    wasLoadingRef.current = isLoading;
+    
+    // If we have queued messages and not loading, trigger processing
+    if (queuedMessages.length > 0 && !isLoading) {
+      // Small delay to ensure component is fully mounted
+      const timer = setTimeout(() => {
+        if (!isLoading && queuedMessages.length > 0 && !queuePausedRef.current) {
+          const nextMessage = queuedMessages[0];
+          LocalMessageStorage.addMessage(nextMessage.content);
+          handleSubmit(new CustomEvent("submit", { detail: { value: nextMessage.content } }) as unknown as React.FormEvent);
+          setQueuedMessages(prev => prev.slice(1));
+        }
+      }, 500);
+      return () => clearTimeout(timer);
+    }
+  }, []); // Only run on mount
   useEffect(() => {
-    // Debug logging removed - draft functionality is working correctly
-  }, [chatContext?.contextKey, chatContext?.draft, chatContext]);
+    QueueStorage.saveQueue(queuedMessages);
+  }, [queuedMessages]);
+
+  // File drop functionality
+  const { droppedFiles: localDroppedFiles, handleDrop: handleLocalDrop, handleDragOver: handleLocalDragOver } = useFileDrop();
+  
+
   const [mentionPopover, setMentionPopover] = useState<{
     isOpen: boolean;
     position: { x: number; y: number };
@@ -133,410 +156,234 @@ export default function ChatInput({
   }>({
     isOpen: false,
     position: { x: 0, y: 0 },
-    query: '',
+    query: "",
     mentionStart: -1,
     selectedIndex: 0,
   });
-  const mentionPopoverRef = useRef<{
-    getDisplayFiles: () => FileItemWithMatch[];
-    selectFile: (index: number) => void;
-  }>(null);
-
-  // Whisper hook for voice dictation
+  const [hasUserTyped, setHasUserTyped] = useState(false);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const [savedInput, setSavedInput] = useState("");
+  const [isInGlobalHistory, setIsInGlobalHistory] = useState(false);
+  // Combine parent dropped files with local ones
+  // Voice recording functionality
   const {
     isRecording,
     isTranscribing,
-    canUseDictation,
-    audioContext,
-    analyser,
     startRecording,
     stopRecording,
-    recordingDuration,
-    estimatedSize,
-  } = useWhisper({
-    onTranscription: (text) => {
-      // Append transcribed text to the current input
-      const newValue = displayValue.trim() ? `${displayValue.trim()} ${text}` : text;
-      setDisplayValue(newValue);
-      setValue(newValue);
-      textAreaRef.current?.focus();
-    },
-    onError: (error) => {
-      toastError({
-        title: 'Dictation Error',
-        msg: error.message,
-      });
-    },
-    onSizeWarning: (sizeMB) => {
-      toastError({
-        title: 'Recording Size Warning',
-        msg: `Recording is ${sizeMB.toFixed(1)}MB. Maximum size is 25MB.`,
-      });
-    },
-  });
-
-  // Get dictation settings to check configuration status
-  const { settings: dictationSettings } = useDictationSettings();
-
-  // Update internal value when initialValue changes
-  useEffect(() => {
-    setValue(initialValue);
-    setDisplayValue(initialValue);
-
-    // Reset draft loaded flag when initialValue changes
-    draftLoadedRef.current = false;
-
-    // Use a functional update to get the current pastedImages
-    // and perform cleanup. This avoids needing pastedImages in the deps.
-    setPastedImages((currentPastedImages) => {
-      currentPastedImages.forEach((img) => {
-        if (img.filePath) {
-          window.electron.deleteTempFile(img.filePath);
-        }
-      });
-      return []; // Return a new empty array
-    });
+    audioContext,
+    analyser
+  } = useWhisper();
+  const allDroppedFiles = [...(droppedFiles || []), ...localDroppedFiles];
+  // Derived state - chatState != Idle means we're in some form of loading state
+  const isLoading = chatState !== ChatState.Idle;
+  const { alerts, addAlert, clearAlerts } = useAlerts();
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const toolCount = useToolCount();
+  const mentionPopoverRef = useRef<{
+    getDisplayFiles: () => FileItemWithMatch[];
+    selectFile: (index: number) => void;
+  }>(null);
+  const { isLoadingCompaction, handleManualCompaction } = useChatContextManager();
+  const { getProviders, read } = useConfig();
+  const { getCurrentModelAndProvider, currentModel, currentProvider } = useModelAndProvider();
+  const [tokenLimit, setTokenLimit] = useState<number>(TOKEN_LIMIT_DEFAULT);
+  const [isTokenLimitLoaded, setIsTokenLimitLoaded] = useState(false);
 
-    // Reset history index when input is cleared
-    setHistoryIndex(-1);
-    setIsInGlobalHistory(false);
-    setHasUserTyped(false);
-  }, [initialValue]); // Keep only initialValue as a dependency
+  // Draft functionality - get chat context and global draft context
+  // We need to handle the case where ChatInput is used without ChatProvider (e.g., in Hub)
+  const chatContext = useChatContext(); // This should always be available now
+  const draftLoadedRef = useRef(false);
 
-  // Handle recipe prompt updates
-  useEffect(() => {
-    // If recipe is accepted and we have an initial prompt, and no messages yet, set the prompt
-    if (recipeAccepted && initialPrompt && messages.length === 0 && !displayValue.trim()) {
-      setDisplayValue(initialPrompt);
-      setValue(initialPrompt);
-      setTimeout(() => {
-        textAreaRef.current?.focus();
-      }, 0);
-    }
-  }, [recipeAccepted, initialPrompt, messages.length, displayValue]);
+  const maxHeight = 10 * 24;
+  const dictationSettings = useDictationSettings();
 
-  // Draft functionality - load draft if no initial value or recipe
-  useEffect(() => {
-    // Reset draft loaded flag when context changes
-    draftLoadedRef.current = false;
-  }, [chatContext?.contextKey]);
 
+  const hasSubmittableContent =
+    displayValue.trim() ||
+    pastedImages.some((img) => img.filePath && !img.error && !img.isLoading) ||
+    allDroppedFiles.some((file) => !file.error && !file.isLoading);
+  const isAnyImageLoading = pastedImages.some((img) => img.isLoading);
+  const isAnyDroppedFileLoading = allDroppedFiles.some((file) => file.isLoading);
+  const wasLoadingRef = useRef(isLoading);
+  const sendNowTriggeredRef = useRef(false);
+  const queuePausedRef = useRef(false);
+  const editingMessageIdRef = useRef<string | null>(null);
+  const isEditingRef = useRef(false);
+  // Debug logging for draft context
   useEffect(() => {
-    // Only load draft once and if conditions are met
-    if (!initialValue && !recipeConfig && !draftLoadedRef.current && chatContext) {
-      const draftText = chatContext.draft || '';
-
-      if (draftText) {
-        setDisplayValue(draftText);
-        setValue(draftText);
+    if (wasLoadingRef.current && !isLoading && queuedMessages.length > 0) {
+      // Skip automatic processing if queue is paused by stop command
+
+      // Skip automatic processing only if editing the first message in queue
+      if (editingMessageIdRef.current && queuedMessages.length > 0) {
+        // Only pause if editing the first message (next to be processed)
+        if (editingMessageIdRef.current === queuedMessages[0].id) {
+          wasLoadingRef.current = isLoading;
+          return;
+        }
       }
 
-      // Always mark as loaded after checking, regardless of whether we found a draft
-      draftLoadedRef.current = true;
-    }
-  }, [chatContext, initialValue, recipeConfig]);
-
-  // Save draft when user types (debounced)
-  const debouncedSaveDraft = useMemo(
-    () =>
-      debounce((value: string) => {
-        if (chatContext && chatContext.setDraft) {
-          chatContext.setDraft(value);
-        }
-      }, 500), // Save draft after 500ms of no typing
-    [chatContext]
-  );
+      if (queuePausedRef.current) {
+        wasLoadingRef.current = isLoading;
+        return;
+      }
 
-  // State to track if the IME is composing (i.e., in the middle of Japanese IME input)
-  const [isComposing, setIsComposing] = useState(false);
-  const [historyIndex, setHistoryIndex] = useState(-1);
-  const [savedInput, setSavedInput] = useState('');
-  const [isInGlobalHistory, setIsInGlobalHistory] = useState(false);
-  const [hasUserTyped, setHasUserTyped] = useState(false);
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
-  const timeoutRefsRef = useRef<Set<ReturnType<typeof setTimeout>>>(new Set());
+      // Skip automatic processing if Send Now was triggered
+      if (sendNowTriggeredRef.current) {
+        sendNowTriggeredRef.current = false;
+        wasLoadingRef.current = isLoading;
+        return;
+      }
+      
+      // submit the queued message directly when ready
+      const nextMessage = queuedMessages[0];
+      LocalMessageStorage.addMessage(nextMessage.content);
+      handleSubmit(
+        new CustomEvent("submit", {
+          detail: { value: nextMessage.content },
+        }) as unknown as React.FormEvent
+      );
 
-  // Use shared file drop hook for ChatInput
-  const {
-    droppedFiles: localDroppedFiles,
-    setDroppedFiles: setLocalDroppedFiles,
-    handleDrop: handleLocalDrop,
-    handleDragOver: handleLocalDragOver,
-  } = useFileDrop();
-
-  // Merge local dropped files with parent dropped files
-  const allDroppedFiles = [...droppedFiles, ...localDroppedFiles];
-
-  const handleRemoveDroppedFile = (idToRemove: string) => {
-    // Remove from local dropped files
-    setLocalDroppedFiles((prev) => prev.filter((file) => file.id !== idToRemove));
-
-    // If it's from parent, call the parent's callback
-    if (onFilesProcessed && droppedFiles.some((file) => file.id === idToRemove)) {
-      onFilesProcessed();
+      // Remove the processed message from queue
+      setQueuedMessages(prev => prev.slice(1));
     }
+    wasLoadingRef.current = isLoading;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoading]);  // Queue management functions
+  const handleRemoveQueuedMessage = (id: string) => {
+    // Update both state and storage
+    QueueStorage.removeMessage(id);
+    setQueuedMessages(prev => prev.filter(msg => msg.id !== id));
   };
 
-  const handleRemovePastedImage = (idToRemove: string) => {
-    const imageToRemove = pastedImages.find((img) => img.id === idToRemove);
-    if (imageToRemove?.filePath) {
-      window.electron.deleteTempFile(imageToRemove.filePath);
-    }
-    setPastedImages((currentImages) => currentImages.filter((img) => img.id !== idToRemove));
+  const handleClearQueue = () => {
+    // Clear both state and storage
+    QueueStorage.clearQueue();
+    setQueuedMessages([]);
   };
 
-  const handleRetryImageSave = async (imageId: string) => {
-    const imageToRetry = pastedImages.find((img) => img.id === imageId);
-    if (!imageToRetry || !imageToRetry.dataUrl) return;
+  const handleStopAndSend = (messageId: string) => {
+    // Resume queue processing when using Send Now
 
-    // Set the image to loading state
-    setPastedImages((prev) =>
-      prev.map((img) => (img.id === imageId ? { ...img, isLoading: true, error: undefined } : img))
-    );
-
-    try {
-      const result = await window.electron.saveDataUrlToTemp(imageToRetry.dataUrl, imageId);
-      setPastedImages((prev) =>
-        prev.map((img) =>
-          img.id === result.id
-            ? { ...img, filePath: result.filePath, error: result.error, isLoading: false }
-            : img
-        )
-      );
-    } catch (err) {
-      console.error('Error retrying image save:', err);
-      setPastedImages((prev) =>
-        prev.map((img) =>
-          img.id === imageId
-            ? { ...img, error: 'Failed to save image via Electron.', isLoading: false }
-            : img
-        )
-      );
-    }
-  };
-
-  useEffect(() => {
-    if (textAreaRef.current) {
-      textAreaRef.current.focus();
-    }
-  }, []);
-
-  // Load model limits from the API
-  const getModelLimits = async () => {
-    try {
-      const response = await read('model-limits', false);
-      if (response) {
-        // The response is already parsed, no need for JSON.parse
-        return response as ModelLimit[];
-      }
-    } catch (err) {
-      console.error('Error fetching model limits:', err);
+    // After Send Now, if there are more messages and not loading, trigger processing
+    if (queuedMessages.length > 1 && !isLoading) {
+      // Use a simple timeout to trigger next message processing
+      setTimeout(() => {
+        if (!isLoading && queuedMessages.length > 0 && !queuePausedRef.current) {
+          // Manually trigger the next message processing
+          const remainingAfterRemoval = queuedMessages.filter(msg => msg.id !== messageId);
+          if (remainingAfterRemoval.length > 0) {
+            const nextMessage = remainingAfterRemoval[0];
+            LocalMessageStorage.addMessage(nextMessage.content);
+            handleSubmit(new CustomEvent("submit", { detail: { value: nextMessage.content } }) as unknown as React.FormEvent);
+            setQueuedMessages(prev => prev.filter(msg => msg.id !== nextMessage.id));
+          }
+        }
+      }, 1500);
     }
-    return [];
-  };
 
-  // Helper function to find model limit using pattern matching
-  const findModelLimit = (modelName: string, modelLimits: ModelLimit[]): number | null => {
-    if (!modelName) return null;
-    const matchingLimit = modelLimits.find((limit) =>
-      modelName.toLowerCase().includes(limit.pattern.toLowerCase())
-    );
-    return matchingLimit ? matchingLimit.context_limit : null;
+    queuePausedRef.current = false;
+
+    const messageToSend = queuedMessages.find(msg => msg.id === messageId);
+    if (!messageToSend) return;
+    
+    // Set flag to prevent automatic queue processing
+    sendNowTriggeredRef.current = true;
+    
+    if (onStop) onStop();
+    setQueuedMessages(prev => prev.filter(msg => msg.id !== messageId));
+    LocalMessageStorage.addMessage(messageToSend.content);
+    handleSubmit(new CustomEvent("submit", { detail: { value: messageToSend.content } }) as unknown as React.FormEvent);
   };
+  const performSubmit = () => {
+    const validPastedImageFilesPaths = pastedImages
+      .filter((img) => img.filePath && !img.error && !img.isLoading)
+      .map((img) => img.filePath as string);
 
-  // Load providers and get current model's token limit
-  const loadProviderDetails = async () => {
-    try {
-      // Reset token limit loaded state
-      setIsTokenLimitLoaded(false);
-
-      // Get current model and provider first to avoid unnecessary provider fetches
-      const { model, provider } = await getCurrentModelAndProvider();
-      if (!model || !provider) {
-        console.log('No model or provider found');
-        setIsTokenLimitLoaded(true);
-        return;
-      }
+    // Get paths from all dropped files (both parent and local)
+    const droppedFilePaths = allDroppedFiles
+      .filter((file) => !file.error && !file.isLoading)
+      .map((file) => file.path);
 
-      const providers = await getProviders(true);
+    let textToSend = displayValue.trim();
 
-      // Find the provider details for the current provider
-      const currentProvider = providers.find((p) => p.name === provider);
-      if (currentProvider?.metadata?.known_models) {
-        // Find the model's token limit from the backend response
-        const modelConfig = currentProvider.metadata.known_models.find((m) => m.name === model);
-        if (modelConfig?.context_limit) {
-          setTokenLimit(modelConfig.context_limit);
-          setIsTokenLimitLoaded(true);
-          return;
-        }
-      }
+    // Combine pasted images and dropped files
+    const allFilePaths = [...validPastedImageFilesPaths, ...droppedFilePaths];
+    if (allFilePaths.length > 0) {
+      const pathsString = allFilePaths.join(" ");
+      textToSend = textToSend ? `${textToSend} ${pathsString}` : pathsString;
+    }
 
-      // Fallback: Use pattern matching logic if no exact model match was found
-      const modelLimit = await getModelLimits();
-      const fallbackLimit = findModelLimit(model as string, modelLimit);
-      if (fallbackLimit !== null) {
-        setTokenLimit(fallbackLimit);
-        setIsTokenLimitLoaded(true);
-        return;
+    if (textToSend) {
+      if (displayValue.trim()) {
+        LocalMessageStorage.addMessage(displayValue);
+      } else if (allFilePaths.length > 0) {
+        LocalMessageStorage.addMessage(allFilePaths.join(" "));
       }
 
-      // If no match found, use the default model limit
-      setTokenLimit(TOKEN_LIMIT_DEFAULT);
-      setIsTokenLimitLoaded(true);
-    } catch (err) {
-      console.error('Error loading providers or token limit:', err);
-      // Set default limit on error
-      setTokenLimit(TOKEN_LIMIT_DEFAULT);
-      setIsTokenLimitLoaded(true);
-    }
-  };
+      handleSubmit(
+        new CustomEvent("submit", { detail: { value: textToSend } }) as unknown as React.FormEvent
+      );
 
-  // Initial load and refresh when model changes
-  useEffect(() => {
-    loadProviderDetails();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentModel, currentProvider]);
+      setDisplayValue("");
+      setValue("");
+      setPastedImages([]);
+      setHistoryIndex(-1);
+      setSavedInput("");
+      setIsInGlobalHistory(false);
+      setHasUserTyped(false);
 
-  // Handle tool count alerts and token usage
-  useEffect(() => {
-    clearAlerts();
-
-    // Always show token alerts if we have loaded the real token limit and have tokens
-    if (isTokenLimitLoaded && tokenLimit && numTokens && numTokens > 0) {
-      if (numTokens >= tokenLimit) {
-        // Only show error alert when limit reached
-        addAlert({
-          type: AlertType.Error,
-          message: `Token limit reached (${numTokens.toLocaleString()}/${tokenLimit.toLocaleString()}) \n You've reached the model's conversation limit. The session will be saved — copy anything important and start a new one to continue.`,
-          autoShow: true, // Auto-show token limit errors
-        });
-      } else if (numTokens >= tokenLimit * TOKEN_WARNING_THRESHOLD) {
-        // Only show warning alert when approaching limit
-        addAlert({
-          type: AlertType.Warning,
-          message: `Approaching token limit (${numTokens.toLocaleString()}/${tokenLimit.toLocaleString()}) \n You're reaching the model's conversation limit. Consider compacting the conversation to continue.`,
-          autoShow: true, // Auto-show token limit warnings
-        });
-      } else {
-        // Show info alert with summarize button
-        addAlert({
-          type: AlertType.Info,
-          message: 'Context window',
-          progress: {
-            current: numTokens,
-            total: tokenLimit,
-          },
-          showSummarizeButton: true,
-          onSummarize: () => {
-            handleManualCompaction(messages, setMessages);
-          },
-          summarizeIcon: <ScrollText size={12} />,
-        });
+      // Clear draft when message is sent
+      if (chatContext && chatContext.clearDraft) {
+        chatContext.clearDraft();
       }
-    } else if (isTokenLimitLoaded && tokenLimit) {
-      // Always show context window info even when no tokens are present (start of conversation)
-      addAlert({
-        type: AlertType.Info,
-        message: 'Context window',
-        progress: {
-          current: 0,
-          total: tokenLimit,
-        },
-        showSummarizeButton: messages.length > 0,
-        onSummarize:
-          messages.length > 0
-            ? () => {
-                handleManualCompaction(messages, setMessages);
-              }
-            : undefined,
-        summarizeIcon: messages.length > 0 ? <ScrollText size={12} /> : undefined,
-      });
-    }
 
-    // Add tool count alert if we have the data
-    if (toolCount !== null && toolCount > TOOLS_MAX_SUGGESTED) {
-      addAlert({
-        type: AlertType.Warning,
-        message: `Too many tools can degrade performance.\nTool count: ${toolCount} (recommend: ${TOOLS_MAX_SUGGESTED})`,
-        action: {
-          text: 'View extensions',
-          onClick: () => setView('extensions'),
-        },
-        autoShow: false, // Don't auto-show tool count warnings
-      });
+      // Clear both parent and local dropped files after processing
+      if (onFilesProcessed && droppedFiles.length > 0) {
+        onFilesProcessed();
+      }
+      if (localDroppedFiles.length > 0) {
+        // Note: We need to add setLocalDroppedFiles function
+      }
     }
-    // We intentionally omit setView as it shouldn't trigger a re-render of alerts
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [numTokens, toolCount, tokenLimit, isTokenLimitLoaded, addAlert, clearAlerts]);
-
-  // Cleanup effect for component unmount - prevent memory leaks
-  useEffect(() => {
-    return () => {
-      // Clear any pending timeouts from image processing
-      setPastedImages((currentImages) => {
-        currentImages.forEach((img) => {
-          if (img.filePath) {
-            try {
-              window.electron.deleteTempFile(img.filePath);
-            } catch (error) {
-              console.error('Error deleting temp file:', error);
-            }
-          }
-        });
-        return [];
-      });
-
-      // Clear all tracked timeouts
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      const timeouts = timeoutRefsRef.current;
-      timeouts.forEach((timeoutId) => {
-        window.clearTimeout(timeoutId);
-      });
-      timeouts.clear();
-
-      // Clear alerts to prevent memory leaks
-      clearAlerts();
-    };
-  }, [clearAlerts]);
-
-  const maxHeight = 10 * 24;
+  };
+  const handleReorderMessages = (reorderedMessages: QueuedMessage[]) => {
 
-  // Immediate function to update actual value - no debounce for better responsiveness
-  const updateValue = React.useCallback((value: string) => {
-    setValue(value);
-  }, []);
-
-  const debouncedAutosize = useMemo(
-    () =>
-      debounce((element: HTMLTextAreaElement) => {
-        element.style.height = '0px'; // Reset height
-        const scrollHeight = element.scrollHeight;
-        element.style.height = Math.min(scrollHeight, maxHeight) + 'px';
-      }, 50),
-    [maxHeight]
-  );
+    // Update both state and storage
+    QueueStorage.reorderQueue(reorderedMessages);
+    setQueuedMessages(reorderedMessages);
+  };
 
-  useEffect(() => {
-    if (textAreaRef.current) {
-      debouncedAutosize(textAreaRef.current);
-    }
-  }, [debouncedAutosize, displayValue]);
+  const handleEditMessage = (messageId: string, newContent: string) => {
+    // Update both state and storage
+    QueueStorage.updateMessage(messageId, newContent);
+    setQueuedMessages(prev => 
+      prev.map(msg => 
+        msg.id === messageId 
+          ? { ...msg, content: newContent.trim(), timestamp: Date.now() }
+          : msg
+      )
+    );
+  };
 
-  // Reset textarea height when displayValue is empty
-  useEffect(() => {
-    if (textAreaRef.current && displayValue === '') {
-      textAreaRef.current.style.height = 'auto';
+  const handleTriggerQueueProcessing = () => {
+    // Manually trigger queue processing if not loading and messages exist
+    if (!isLoading && queuedMessages.length > 0 && !queuePausedRef.current && !editingMessageIdRef.current) {
+      const nextMessage = queuedMessages[0];
+      LocalMessageStorage.addMessage(nextMessage.content);
+      handleSubmit(new CustomEvent("submit", { detail: { value: nextMessage.content } }) as unknown as React.FormEvent);
+      setQueuedMessages(prev => prev.slice(1));
     }
-  }, [displayValue]);
+  };
 
   const handleChange = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
     const val = evt.target.value;
     const cursorPosition = evt.target.selectionStart;
 
     setDisplayValue(val); // Update display immediately
-    updateValue(val); // Update actual value immediately for better responsiveness
-    debouncedSaveDraft(val); // Save draft with debounce
+    setValue(val); // Update actual value immediately for better responsiveness
     // Mark that the user has typed something
     setHasUserTyped(true);
 
@@ -546,42 +393,183 @@ export default function ChatInput({
 
   const checkForMention = (text: string, cursorPosition: number, textArea: HTMLTextAreaElement) => {
     // Find the last @ before the cursor
-    const beforeCursor = text.slice(0, cursorPosition);
-    const lastAtIndex = beforeCursor.lastIndexOf('@');
-
-    if (lastAtIndex === -1) {
-      // No @ found, close mention popover
+    const textBeforeCursor = text.substring(0, cursorPosition);
+    const atIndex = textBeforeCursor.lastIndexOf("@");
+    
+    if (atIndex !== -1) {
+      const query = textBeforeCursor.substring(atIndex + 1);
+      const rect = textArea.getBoundingClientRect();
+      setMentionPopover({
+        isOpen: true,
+        query,
+        selectedIndex: 0,
+        position: { x: rect.left, y: rect.top - 200 },
+        mentionStart: atIndex,
+      });
+    } else {
       setMentionPopover((prev) => ({ ...prev, isOpen: false }));
+    }
+  };
+  // Handlers for composition events, which are crucial for proper IME behavior
+  const handleCompositionStart = () => {
+    setIsComposing(true);
+  };
+
+  const handleCompositionEnd = () => {
+    setIsComposing(false);
+  };
+  const handleHistoryNavigation = (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    const isUp = evt.key === "ArrowUp";
+    const isDown = evt.key === "ArrowDown";
+
+    // Only handle up/down keys with Cmd/Ctrl modifier
+    if ((!isUp && !isDown) || !(evt.metaKey || evt.ctrlKey) || evt.altKey || evt.shiftKey) {
       return;
     }
 
-    // Check if there's a space between @ and cursor (which would end the mention)
-    const afterAt = beforeCursor.slice(lastAtIndex + 1);
-    if (afterAt.includes(' ') || afterAt.includes('\n')) {
-      setMentionPopover((prev) => ({ ...prev, isOpen: false }));
+    // Only prevent history navigation if the user has actively typed something
+    if (hasUserTyped && displayValue.trim() !== "") {
       return;
     }
 
-    // Calculate position for the popover - position it above the chat input
-    const textAreaRect = textArea.getBoundingClientRect();
-
-    setMentionPopover((prev) => ({
-      ...prev,
-      isOpen: true,
-      position: {
-        x: textAreaRect.left,
-        y: textAreaRect.top, // Position at the top of the textarea
-      },
-      query: afterAt,
-      mentionStart: lastAtIndex,
-      selectedIndex: 0, // Reset selection when query changes
-      // filteredFiles will be populated by the MentionPopover component
-    }));
+    evt.preventDefault();
+
+    // Get global history once to avoid multiple calls
+    const globalHistory = LocalMessageStorage.getRecentMessages() || [];
+
+    // Save current input if we're just starting to navigate history
+    if (historyIndex === -1) {
+      setSavedInput(displayValue || "");
+      setIsInGlobalHistory(commandHistory.length === 0);
+    }
+
+    // Determine which history we're using
+    const currentHistory = isInGlobalHistory ? globalHistory : commandHistory;
+    let newIndex = historyIndex;
+    let newValue = "";
+
+    if (isUp) {
+      // Go backwards in history (older messages)
+      if (newIndex < currentHistory.length - 1) {
+        newIndex++;
+        newValue = currentHistory[currentHistory.length - 1 - newIndex];
+      }
+    } else if (isDown) {
+      // Go forwards in history (newer messages)
+      if (newIndex > 0) {
+        newIndex--;
+        newValue = currentHistory[currentHistory.length - 1 - newIndex];
+      } else if (newIndex === 0) {
+        // Return to saved input
+        newIndex = -1;
+        newValue = savedInput;
+      }
+    }
+
+    setHistoryIndex(newIndex);
+    setDisplayValue(newValue);
+    setValue(newValue);
+    // Reset hasUserTyped when we populate from history
+    setHasUserTyped(false);
   };
 
+  const handleKeyDown = (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // If mention popover is open, handle arrow keys and enter
+    if (mentionPopover.isOpen && mentionPopoverRef.current) {
+      if (evt.key === "ArrowDown") {
+        evt.preventDefault();
+        const displayFiles = mentionPopoverRef.current.getDisplayFiles();
+        const maxIndex = Math.max(0, displayFiles.length - 1);
+        setMentionPopover((prev) => ({
+          ...prev,
+          selectedIndex: Math.min(prev.selectedIndex + 1, maxIndex),
+        }));
+        return;
+      }
+      if (evt.key === "ArrowUp") {
+        evt.preventDefault();
+        setMentionPopover((prev) => ({
+          ...prev,
+          selectedIndex: Math.max(prev.selectedIndex - 1, 0),
+        }));
+        return;
+      }
+      if (evt.key === "Enter") {
+        evt.preventDefault();
+        mentionPopoverRef.current.selectFile(mentionPopover.selectedIndex);
+        return;
+      }
+      if (evt.key === "Escape") {
+        evt.preventDefault();
+        setMentionPopover((prev) => ({ ...prev, isOpen: false }));
+        return;
+      }
+    }
+
+    // Handle history navigation first
+    handleHistoryNavigation(evt);
+
+    if (evt.key === "Enter") {
+      // should not trigger submit on Enter if it's composing (IME input in progress) or shift/alt(option) is pressed
+      if (evt.shiftKey || isComposing) {
+        // Allow line break for Shift+Enter, or during IME composition
+        return;
+      }
+
+      if (evt.altKey) {
+        const newValue = displayValue + "\n";
+        setDisplayValue(newValue);
+        setValue(newValue);
+        return;
+      }
+
+      evt.preventDefault();
+
+      // Check for stop commands and interrupt immediately
+      if (isLoading && displayValue.trim()) {
+        const input = displayValue.trim().toLowerCase();
+        if (input === "stop" || input === "wait" || input.startsWith("stop ") || input.startsWith("wait ")) {
+          if (onStop) onStop(); // Stop immediately
+
+          // Pause the queue to prevent auto-processing next message
+          queuePausedRef.current = true;
+
+          LocalMessageStorage.addMessage(displayValue.trim());
+          handleSubmit(new CustomEvent("submit", { detail: { value: displayValue.trim() } }) as unknown as React.FormEvent);
+          setDisplayValue("");
+          setValue("");
+          return;
+        }
+        
+        // If not an interruption, add to queue
+        const newMessage = {
+          id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
+          content: displayValue.trim(),
+          timestamp: Date.now()
+        };
+        setQueuedMessages(prev => [...prev, newMessage]);
+        setDisplayValue("");
+        setValue("");
+        return;
+      }
+
+      const canSubmit =
+        !isLoading &&
+        !isLoadingCompaction &&
+        (displayValue.trim() ||
+          pastedImages.some((img) => img.filePath && !img.error && !img.isLoading) ||
+          allDroppedFiles.some((file) => !file.error && !file.isLoading));
+      // Resume queue processing when sending a new message
+      queuePausedRef.current = false;
+
+      if (canSubmit) {
+        performSubmit();
+      }
+    }
+  };
   const handlePaste = async (evt: React.ClipboardEvent<HTMLTextAreaElement>) => {
     const files = Array.from(evt.clipboardData.files || []);
-    const imageFiles = files.filter((file) => file.type.startsWith('image/'));
+    const imageFiles = files.filter((file) => file.type.startsWith("image/"));
 
     if (imageFiles.length === 0) return;
 
@@ -592,7 +580,7 @@ export default function ChatInput({
         ...prev,
         {
           id: `error-${Date.now()}`,
-          dataUrl: '',
+          dataUrl: "",
           isLoading: false,
           error: `Cannot paste ${imageFiles.length} image(s). Maximum ${MAX_IMAGES_PER_MESSAGE} images per message allowed. Currently have ${pastedImages.length}.`,
         },
@@ -600,7 +588,7 @@ export default function ChatInput({
 
       // Remove the error message after 5 seconds with cleanup tracking
       const timeoutId = setTimeout(() => {
-        setPastedImages((prev) => prev.filter((img) => !img.id.startsWith('error-')));
+        setPastedImages((prev) => prev.filter((img) => !img.id.startsWith("error-")));
         timeoutRefsRef.current.delete(timeoutId);
       }, 5000);
       timeoutRefsRef.current.add(timeoutId);
@@ -619,7 +607,7 @@ export default function ChatInput({
         const errorId = `error-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
         newImages.push({
           id: errorId,
-          dataUrl: '',
+          dataUrl: "",
           isLoading: false,
           error: `Image too large (${Math.round(file.size / (1024 * 1024))}MB). Maximum ${MAX_IMAGE_SIZE_MB}MB allowed.`,
         });
@@ -639,7 +627,7 @@ export default function ChatInput({
       // Add the image with loading state
       newImages.push({
         id: imageId,
-        dataUrl: '',
+        dataUrl: "",
         isLoading: true,
       });
 
@@ -663,11 +651,11 @@ export default function ChatInput({
               )
             );
           } catch (err) {
-            console.error('Error saving pasted image:', err);
+            console.error("Error saving pasted image:", err);
             setPastedImages((prev) =>
               prev.map((img) =>
                 img.id === imageId
-                  ? { ...img, error: 'Failed to save image via Electron.', isLoading: false }
+                  ? { ...img, error: "Failed to save image via Electron.", isLoading: false }
                   : img
               )
             );
@@ -675,11 +663,11 @@ export default function ChatInput({
         }
       };
       reader.onerror = () => {
-        console.error('Failed to read image file:', file.name);
+        console.error("Failed to read image file:", file.name);
         setPastedImages((prev) =>
           prev.map((img) =>
             img.id === imageId
-              ? { ...img, error: 'Failed to read image file.', isLoading: false }
+              ? { ...img, error: "Failed to read image file.", isLoading: false }
               : img
           )
         );
@@ -690,218 +678,6 @@ export default function ChatInput({
     // Add all new images to the existing list
     setPastedImages((prev) => [...prev, ...newImages]);
   };
-
-  // Cleanup debounced functions on unmount
-  useEffect(() => {
-    return () => {
-      debouncedAutosize.cancel?.();
-      debouncedSaveDraft.cancel?.();
-    };
-  }, [debouncedAutosize, debouncedSaveDraft]);
-
-  // Handlers for composition events, which are crucial for proper IME behavior
-  const handleCompositionStart = () => {
-    setIsComposing(true);
-  };
-
-  const handleCompositionEnd = () => {
-    setIsComposing(false);
-  };
-
-  const handleHistoryNavigation = (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    const isUp = evt.key === 'ArrowUp';
-    const isDown = evt.key === 'ArrowDown';
-
-    // Only handle up/down keys with Cmd/Ctrl modifier
-    if ((!isUp && !isDown) || !(evt.metaKey || evt.ctrlKey) || evt.altKey || evt.shiftKey) {
-      return;
-    }
-
-    // Only prevent history navigation if the user has actively typed something
-    // This allows history navigation when text is populated from history or other sources
-    // but prevents it when the user is actively editing text
-    if (hasUserTyped && displayValue.trim() !== '') {
-      return;
-    }
-
-    evt.preventDefault();
-
-    // Get global history once to avoid multiple calls
-    const globalHistory = LocalMessageStorage.getRecentMessages() || [];
-
-    // Save current input if we're just starting to navigate history
-    if (historyIndex === -1) {
-      setSavedInput(displayValue || '');
-      setIsInGlobalHistory(commandHistory.length === 0);
-    }
-
-    // Determine which history we're using
-    const currentHistory = isInGlobalHistory ? globalHistory : commandHistory;
-    let newIndex = historyIndex;
-    let newValue = '';
-
-    // Handle navigation
-    if (isUp) {
-      // Moving up through history
-      if (newIndex < currentHistory.length - 1) {
-        // Still have items in current history
-        newIndex = historyIndex + 1;
-        newValue = currentHistory[newIndex];
-      } else if (!isInGlobalHistory && globalHistory.length > 0) {
-        // Switch to global history
-        setIsInGlobalHistory(true);
-        newIndex = 0;
-        newValue = globalHistory[newIndex];
-      }
-    } else {
-      // Moving down through history
-      if (newIndex > 0) {
-        // Still have items in current history
-        newIndex = historyIndex - 1;
-        newValue = currentHistory[newIndex];
-      } else if (isInGlobalHistory && commandHistory.length > 0) {
-        // Switch to chat history
-        setIsInGlobalHistory(false);
-        newIndex = commandHistory.length - 1;
-        newValue = commandHistory[newIndex];
-      } else {
-        // Return to original input
-        newIndex = -1;
-        newValue = savedInput;
-      }
-    }
-
-    // Update display if we have a new value
-    if (newIndex !== historyIndex) {
-      setHistoryIndex(newIndex);
-      if (newIndex === -1) {
-        setDisplayValue(savedInput || '');
-        setValue(savedInput || '');
-      } else {
-        setDisplayValue(newValue || '');
-        setValue(newValue || '');
-      }
-      // Reset hasUserTyped when we populate from history
-      setHasUserTyped(false);
-    }
-  };
-
-  const performSubmit = () => {
-    const validPastedImageFilesPaths = pastedImages
-      .filter((img) => img.filePath && !img.error && !img.isLoading)
-      .map((img) => img.filePath as string);
-
-    // Get paths from all dropped files (both parent and local)
-    const droppedFilePaths = allDroppedFiles
-      .filter((file) => !file.error && !file.isLoading)
-      .map((file) => file.path);
-
-    let textToSend = displayValue.trim();
-
-    // Combine pasted images and dropped files
-    const allFilePaths = [...validPastedImageFilesPaths, ...droppedFilePaths];
-    if (allFilePaths.length > 0) {
-      const pathsString = allFilePaths.join(' ');
-      textToSend = textToSend ? `${textToSend} ${pathsString}` : pathsString;
-    }
-
-    if (textToSend) {
-      if (displayValue.trim()) {
-        LocalMessageStorage.addMessage(displayValue);
-      } else if (allFilePaths.length > 0) {
-        LocalMessageStorage.addMessage(allFilePaths.join(' '));
-      }
-
-      handleSubmit(
-        new CustomEvent('submit', { detail: { value: textToSend } }) as unknown as React.FormEvent
-      );
-
-      setDisplayValue('');
-      setValue('');
-      setPastedImages([]);
-      setHistoryIndex(-1);
-      setSavedInput('');
-      setIsInGlobalHistory(false);
-      setHasUserTyped(false);
-
-      // Clear draft when message is sent
-      if (chatContext && chatContext.clearDraft) {
-        chatContext.clearDraft();
-      }
-
-      // Clear both parent and local dropped files after processing
-      if (onFilesProcessed && droppedFiles.length > 0) {
-        onFilesProcessed();
-      }
-      if (localDroppedFiles.length > 0) {
-        setLocalDroppedFiles([]);
-      }
-    }
-  };
-
-  const handleKeyDown = (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    // If mention popover is open, handle arrow keys and enter
-    if (mentionPopover.isOpen && mentionPopoverRef.current) {
-      if (evt.key === 'ArrowDown') {
-        evt.preventDefault();
-        const displayFiles = mentionPopoverRef.current.getDisplayFiles();
-        const maxIndex = Math.max(0, displayFiles.length - 1);
-        setMentionPopover((prev) => ({
-          ...prev,
-          selectedIndex: Math.min(prev.selectedIndex + 1, maxIndex),
-        }));
-        return;
-      }
-      if (evt.key === 'ArrowUp') {
-        evt.preventDefault();
-        setMentionPopover((prev) => ({
-          ...prev,
-          selectedIndex: Math.max(prev.selectedIndex - 1, 0),
-        }));
-        return;
-      }
-      if (evt.key === 'Enter') {
-        evt.preventDefault();
-        mentionPopoverRef.current.selectFile(mentionPopover.selectedIndex);
-        return;
-      }
-      if (evt.key === 'Escape') {
-        evt.preventDefault();
-        setMentionPopover((prev) => ({ ...prev, isOpen: false }));
-        return;
-      }
-    }
-
-    // Handle history navigation first
-    handleHistoryNavigation(evt);
-
-    if (evt.key === 'Enter') {
-      // should not trigger submit on Enter if it's composing (IME input in progress) or shift/alt(option) is pressed
-      if (evt.shiftKey || isComposing) {
-        // Allow line break for Shift+Enter, or during IME composition
-        return;
-      }
-
-      if (evt.altKey) {
-        const newValue = displayValue + '\n';
-        setDisplayValue(newValue);
-        setValue(newValue);
-        return;
-      }
-
-      evt.preventDefault();
-      const canSubmit =
-        !isLoading &&
-        !isLoadingCompaction &&
-        (displayValue.trim() ||
-          pastedImages.some((img) => img.filePath && !img.error && !img.isLoading) ||
-          allDroppedFiles.some((file) => !file.error && !file.isLoading));
-      if (canSubmit) {
-        performSubmit();
-      }
-    }
-  };
-
   const onFormSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     const canSubmit =
@@ -910,6 +686,9 @@ export default function ChatInput({
       (displayValue.trim() ||
         pastedImages.some((img) => img.filePath && !img.error && !img.isLoading) ||
         allDroppedFiles.some((file) => !file.error && !file.isLoading));
+      // Resume queue processing when sending a new message
+      queuePausedRef.current = false;
+
     if (canSubmit) {
       performSubmit();
     }
@@ -947,16 +726,8 @@ export default function ChatInput({
     }, 0);
   };
 
-  const hasSubmittableContent =
-    displayValue.trim() ||
-    pastedImages.some((img) => img.filePath && !img.error && !img.isLoading) ||
-    allDroppedFiles.some((file) => !file.error && !file.isLoading);
-  const isAnyImageLoading = pastedImages.some((img) => img.isLoading);
-  const isAnyDroppedFileLoading = allDroppedFiles.some((file) => file.isLoading);
-
   return (
-    <div
-      className={`flex flex-col relative h-auto p-4 transition-colors ${
+    <div      className={`flex flex-col relative h-auto px-4 pb-4 transition-colors ${
         disableAnimation ? '' : 'page-transition'
       } ${
         isFocused
@@ -967,14 +738,33 @@ export default function ChatInput({
       onDrop={handleLocalDrop}
       onDragOver={handleLocalDragOver}
     >
+      {/* Message Queue Display */}
+      <MessageQueue
+        isPaused={queuePausedRef.current}
+        queuedMessages={queuedMessages}
+        onRemoveMessage={handleRemoveQueuedMessage}
+        onClearQueue={handleClearQueue}
+        onStopAndSend={handleStopAndSend}
+        onReorderMessages={handleReorderMessages}
+        onEditMessage={handleEditMessage}
+        onTriggerQueueProcessing={handleTriggerQueueProcessing}
+        editingMessageIdRef={editingMessageIdRef}
+        className="border-b border-border/30"
+      />
       {/* Input row with inline action buttons wrapped in form */}
-      <form onSubmit={onFormSubmit} className="relative flex items-end">
+      <form onSubmit={onFormSubmit} className={`relative flex items-end ${queuedMessages.length > 0 ? "" : "pt-4"}`}>
         <div className="relative flex-1">
           <textarea
             data-testid="chat-input"
             autoFocus
             id="dynamic-textarea"
-            placeholder={isRecording ? '' : '⌘↑/⌘↓ to navigate messages'}
+            placeholder={
+              isRecording
+                ? ''
+                : queuedMessages.length > 0
+                  ? `${queuedMessages.length} message${queuedMessages.length > 1 ? 's' : ''} queued`
+                  : '⌘↑/⌘↓ to navigate messages'
+            }
             value={displayValue}
             onChange={handleChange}
             onCompositionStart={handleCompositionStart}
@@ -1052,7 +842,7 @@ export default function ChatInput({
                       ? 'bg-red-500 text-white hover:bg-red-600 border-red-500'
                       : isTranscribing
                         ? 'bg-slate-600 text-white cursor-not-allowed animate-pulse border-slate-600'
-                        : 'bg-slate-600 text-white hover:bg-slate-700 border-slate-600'
+                        : 'bg-slate-600 text-white hover:bg-slate-700 border-slate-600 hover:cursor-pointer'
                   }`}
                 >
                   <Microphone />
diff --git a/ui/desktop/src/components/InterruptionHandler.tsx b/ui/desktop/src/components/InterruptionHandler.tsx
new file mode 100644
index 000000000000..52023e6a2fa5
--- /dev/null
+++ b/ui/desktop/src/components/InterruptionHandler.tsx
@@ -0,0 +1,224 @@
+import React, { useState, useEffect } from 'react';
+import { AlertTriangle, StopCircle, PauseCircle, RotateCcw, Zap, AlertCircle } from 'lucide-react';
+import { Button } from './ui/button';
+import { InterruptionMatch, getInterruptionMessage } from '../utils/interruptionDetector';
+
+interface InterruptionHandlerProps {
+  match: InterruptionMatch | null;
+  onConfirmInterruption: () => void;
+  onCancelInterruption: () => void;
+  onRedirect?: (newMessage: string) => void;
+  className?: string;
+}
+
+export const InterruptionHandler: React.FC<InterruptionHandlerProps> = ({
+  match,
+  onConfirmInterruption,
+  onCancelInterruption,
+  onRedirect,
+  className = '',
+}) => {
+  const [redirectMessage, setRedirectMessage] = useState('');
+  const [showRedirectInput, setShowRedirectInput] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (match) {
+      setIsVisible(true);
+      if (match.keyword.action === 'redirect') {
+        setShowRedirectInput(true);
+      } else {
+        setShowRedirectInput(false);
+        setRedirectMessage('');
+      }
+    } else {
+      setIsVisible(false);
+    }
+  }, [match]);
+
+  if (!match) {
+    return null;
+  }
+
+  const getIcon = () => {
+    switch (match.keyword.action) {
+      case 'stop':
+        return <StopCircle className="w-6 h-6 text-red-500" />;
+      case 'pause':
+        return <PauseCircle className="w-6 h-6 text-amber-500" />;
+      case 'redirect':
+        return <RotateCcw className="w-6 h-6 text-blue-500" />;
+      default:
+        return <AlertTriangle className="w-6 h-6 text-orange-500" />;
+    }
+  };
+
+  const getActionColor = () => {
+    switch (match.keyword.action) {
+      case 'stop':
+        return {
+          bg: 'bg-red-50 dark:bg-red-950/20',
+          border: 'border-red-200 dark:border-red-800/50',
+          text: 'text-red-800 dark:text-red-200',
+          accent: 'text-red-600 dark:text-red-400'
+        };
+      case 'pause':
+        return {
+          bg: 'bg-amber-50 dark:bg-amber-950/20',
+          border: 'border-amber-200 dark:border-amber-800/50',
+          text: 'text-amber-800 dark:text-amber-200',
+          accent: 'text-amber-600 dark:text-amber-400'
+        };
+      case 'redirect':
+        return {
+          bg: 'bg-blue-50 dark:bg-blue-950/20',
+          border: 'border-blue-200 dark:border-blue-800/50',
+          text: 'text-blue-800 dark:text-blue-200',
+          accent: 'text-blue-600 dark:text-blue-400'
+        };
+      default:
+        return {
+          bg: 'bg-orange-50 dark:bg-orange-950/20',
+          border: 'border-orange-200 dark:border-orange-800/50',
+          text: 'text-orange-800 dark:text-orange-200',
+          accent: 'text-orange-600 dark:text-orange-400'
+        };
+    }
+  };
+
+  const colors = getActionColor();
+  const message = getInterruptionMessage(match);
+
+  const handleConfirm = () => {
+    if (showRedirectInput && onRedirect && redirectMessage.trim()) {
+      onRedirect(redirectMessage.trim());
+    } else {
+      onConfirmInterruption();
+    }
+  };
+
+  const getActionTitle = () => {
+    switch (match.keyword.action) {
+      case 'stop': return 'Stop Processing';
+      case 'pause': return 'Pause Processing';
+      case 'redirect': return 'Redirect Processing';
+      default: return 'Interrupt Processing';
+    }
+  };
+
+  const getActionDescription = () => {
+    switch (match.keyword.action) {
+      case 'stop': 
+        return 'This will immediately stop the current processing and clear any queued messages.';
+      case 'pause': 
+        return 'This will pause the current processing. Queued messages will be preserved.';
+      case 'redirect': 
+        return 'This will stop current processing and redirect to a new task.';
+      default: 
+        return 'This will interrupt the current processing.';
+    }
+  };
+
+  return (
+    <div className={`fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4 ${className}`}>
+      <div className={`w-full max-w-md mx-auto transition-all duration-300 ease-out ${
+        isVisible ? 'scale-100 opacity-100' : 'scale-95 opacity-0'
+      }`}>
+        {/* Main card */}
+        <div className={`rounded-xl border shadow-2xl backdrop-blur-xl ${colors.bg} ${colors.border}`}>
+          {/* Header */}
+          <div className="p-6 border-b border-current/10">
+            <div className="flex items-start gap-4">
+              <div className="flex-shrink-0 p-2 rounded-full bg-white/50 dark:bg-black/20">
+                {getIcon()}
+              </div>
+              <div className="flex-1">
+                <h3 className={`text-lg font-semibold ${colors.text}`}>
+                  {getActionTitle()}
+                </h3>
+                <p className={`text-sm mt-1 ${colors.accent}`}>
+                  Detected: "{match.matchedText}"
+                </p>
+              </div>
+              <div className={`text-xs px-2 py-1 rounded-full bg-white/30 dark:bg-black/20 ${colors.text}`}>
+                {Math.round(match.confidence * 100)}% confident
+              </div>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className="p-6">
+            <div className="flex items-start gap-3 mb-4">
+              <AlertCircle className={`w-4 h-4 mt-0.5 flex-shrink-0 ${colors.accent}`} />
+              <p className={`text-sm leading-relaxed ${colors.text}`}>
+                {getActionDescription()}
+              </p>
+            </div>
+
+            {/* Redirect input */}
+            {showRedirectInput && (
+              <div className="mb-4 space-y-2">
+                <label className={`text-sm font-medium ${colors.text}`}>
+                  New task or instruction:
+                </label>
+                <textarea
+                  value={redirectMessage}
+                  onChange={(e) => setRedirectMessage(e.target.value)}
+                  placeholder="Enter your new instruction..."
+                  className={`w-full px-3 py-2 border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-current/20 bg-white/50 dark:bg-black/20 ${colors.border} ${colors.text}`}
+                  rows={3}
+                  autoFocus
+                />
+              </div>
+            )}
+
+            {/* Confidence indicator */}
+            <div className="mb-4">
+              <div className="flex items-center justify-between text-xs mb-1">
+                <span className={colors.accent}>Detection Confidence</span>
+                <span className={colors.text}>{Math.round(match.confidence * 100)}%</span>
+              </div>
+              <div className="w-full bg-white/30 dark:bg-black/20 rounded-full h-2">
+                <div 
+                  className={`h-2 rounded-full transition-all duration-500 ${
+                    match.confidence > 0.8 ? 'bg-green-500' : 
+                    match.confidence > 0.6 ? 'bg-amber-500' : 'bg-red-500'
+                  }`}
+                  style={{ width: `${match.confidence * 100}%` }}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="p-6 pt-0 flex gap-3">
+            <Button
+              variant="ghost"
+              onClick={onCancelInterruption}
+              className={`flex-1 hover:bg-white/20 dark:hover:bg-black/20 ${colors.text}`}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleConfirm}
+              disabled={showRedirectInput && !redirectMessage.trim()}
+              className={`flex-1 bg-white/80 hover:bg-white dark:bg-white/10 dark:hover:bg-white/20 ${colors.text} font-medium shadow-md hover:shadow-lg transition-all duration-200`}
+            >
+              <Zap className="w-4 h-4 mr-2" />
+              {showRedirectInput ? 'Redirect' : match.keyword.action === 'stop' ? 'Stop' : 'Confirm'}
+            </Button>
+          </div>
+        </div>
+
+        {/* Backdrop hint */}
+        <div className="text-center mt-4">
+          <p className="text-xs text-white/60">
+            Click outside or press Cancel to continue current processing
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InterruptionHandler;
diff --git a/ui/desktop/src/components/MessageQueue.tsx b/ui/desktop/src/components/MessageQueue.tsx
new file mode 100644
index 000000000000..ed6e383c32d4
--- /dev/null
+++ b/ui/desktop/src/components/MessageQueue.tsx
@@ -0,0 +1,426 @@
+import React, { useState } from 'react';
+import { X, Clock, Send, GripVertical, Zap, Sparkles, ChevronDown, ChevronUp, MoreHorizontal } from 'lucide-react';
+import { Button } from './ui/button';
+
+interface QueuedMessage {
+  id: string;
+  content: string;
+  timestamp: number;
+}
+
+interface MessageQueueProps {
+  queuedMessages: QueuedMessage[];
+  onRemoveMessage: (id: string) => void;
+  onClearQueue: () => void;
+  onStopAndSend?: (messageId: string) => void;
+  onEditMessage?: (messageId: string, newContent: string) => void;
+  onTriggerQueueProcessing?: () => void;
+  editingMessageIdRef?: React.MutableRefObject<string | null>;
+  onReorderMessages?: (reorderedMessages: QueuedMessage[]) => void;
+  className?: string;
+  isPaused?: boolean;
+}
+
+export const MessageQueue: React.FC<MessageQueueProps> = ({
+  queuedMessages,
+  onRemoveMessage,
+  onClearQueue,
+  onStopAndSend,
+  onEditMessage,
+  onTriggerQueueProcessing,
+  editingMessageIdRef,
+  onReorderMessages,
+  className = '',
+  isPaused = false,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [draggedItem, setDraggedItem] = useState<string | null>(null);
+  const [dragOverItem, setDragOverItem] = useState<string | null>(null);
+  const [hoveredMessage, setHoveredMessage] = useState<string | null>(null);
+  const [editingMessage, setEditingMessage] = useState<string | null>(null);
+  const [editContent, setEditContent] = useState<string>("");
+
+  if (queuedMessages.length === 0) {
+    return null;
+  }
+
+  const handleDragStart = (e: React.DragEvent, messageId: string) => {
+    setDraggedItem(messageId);
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/html', messageId);
+  };
+
+  const handleDragOver = (e: React.DragEvent, messageId: string) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    setDragOverItem(messageId);
+  };
+
+  const handleDragLeave = () => {
+    setDragOverItem(null);
+  };
+
+  const handleDrop = (e: React.DragEvent, targetMessageId: string) => {
+    e.preventDefault();
+    
+    if (!draggedItem || !onReorderMessages) return;
+    
+    const draggedIndex = queuedMessages.findIndex(msg => msg.id === draggedItem);
+    const targetIndex = queuedMessages.findIndex(msg => msg.id === targetMessageId);
+    
+    if (draggedIndex === -1 || targetIndex === -1 || draggedIndex === targetIndex) {
+      setDraggedItem(null);
+      setDragOverItem(null);
+      return;
+    }
+
+    const newMessages = [...queuedMessages];
+    const [removed] = newMessages.splice(draggedIndex, 1);
+    newMessages.splice(targetIndex, 0, removed);
+    
+    onReorderMessages(newMessages);
+    setDraggedItem(null);
+    setDragOverItem(null);
+  };
+
+  const handleDragEnd = () => {
+    setDraggedItem(null);
+    setDragOverItem(null);
+  };
+
+  const formatTimestamp = (timestamp: number) => {
+    const now = Date.now();
+    const diff = now - timestamp;
+    if (diff < 60000) return 'now';
+    if (diff < 3600000) return `${Math.floor(diff / 60000)}m`;
+    return `${Math.floor(diff / 3600000)}h`;
+  };
+
+  const nextMessage = queuedMessages[0];
+  const remainingCount = queuedMessages.length - 1;
+
+  // Compact View
+  if (!isExpanded) {
+    return (
+      <div className={`relative ${className}`}>
+        {/* Compact Header */}
+        <div 
+          className="flex items-center justify-between px-4 py-2.5 bg-background border-b border-border/20 cursor-pointer hover:bg-muted/30 transition-all duration-200"
+          onClick={() => setIsExpanded(true)}
+        >
+          <div className="flex items-center gap-3 flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              {isPaused ? (
+                <div className="w-2 h-2 rounded-full bg-amber-500 animate-pulse" />
+              ) : (
+                <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
+              )}
+              <span className="text-sm font-medium text-foreground">
+                {isPaused ? 'Paused' : 'Next'}
+              </span>
+            </div>
+            
+            {/* Next message preview */}
+            <div className="flex-1 min-w-0">
+              <p className="text-sm text-muted-foreground truncate" title={nextMessage.content}>
+                {nextMessage.content.length > 40 
+                  ? `${nextMessage.content.substring(0, 40)}...` 
+                  : nextMessage.content
+                }
+              </p>
+            </div>
+            
+            {/* Queue count */}
+            {remainingCount > 0 && (
+              <div className="flex items-center gap-1 text-xs text-muted-foreground bg-bgSubtle border border-borderSubtle px-2 py-1 rounded-full font-medium">
+                <span>+{remainingCount}</span>
+              </div>
+            )}
+          </div>
+          
+          <div className="flex items-center gap-2">
+            {/* Quick Send Now button */}
+            {onStopAndSend && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onStopAndSend(nextMessage.id);
+                }}
+                className="h-7 px-2 text-xs text-info hover:text-info/80 hover:bg-info/10"
+                title="Send this message now"
+              >
+                <Send className="w-3 h-3" />
+              </Button>
+            )}
+            
+            {/* Expand button */}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
+              title="Expand queue"
+            >
+              <ChevronDown className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+
+        {/* Paused state indicator */}
+        {isPaused && (
+          <div className="px-4 py-1.5 bg-amber-50/60 dark:bg-amber-900/20 border-b border-amber-200/30 dark:border-amber-800/30">
+            <div className="flex items-center gap-2 text-xs text-amber-700 dark:text-amber-300">
+              <Zap className="w-3 h-3" />
+              <span>Queue paused - click "Send" or add new message to resume</span>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // Expanded View
+  return (
+    <div className={`relative ${className}`}>
+      {/* Expanded Header */}
+      <div className="flex items-center justify-between px-4 py-3 bg-background border-b border-border/30">
+        <div className="flex items-center gap-3">
+          <div className="relative">
+            {isPaused ? (
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-amber-500 animate-pulse" />
+                <Clock className="w-4 h-4 text-amber-600 dark:text-amber-400" />
+              </div>
+            ) : (
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
+                <Sparkles className="w-4 h-4 text-info" />
+              </div>
+            )}
+          </div>
+          <div className="flex flex-col">
+            <span className="text-sm font-medium text-foreground">
+              {isPaused ? 'Queue Paused' : 'Message Queue'}
+            </span>
+            <span className="text-xs text-muted-foreground">
+              {queuedMessages.length} message{queuedMessages.length !== 1 ? 's' : ''} 
+              {isPaused ? ' waiting' : ' queued'}
+            </span>
+          </div>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          {queuedMessages.length > 1 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClearQueue}
+              className="text-xs h-7 px-3 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
+            >
+              Clear All
+            </Button>
+          )}
+          
+          {/* Collapse button */}
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setIsExpanded(false)}
+            className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
+            title="Collapse queue"
+          >
+            <ChevronUp className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Status Banner for Paused State */}
+      {isPaused && (
+        <div className="px-4 py-2 bg-amber-50/80 dark:bg-amber-900/20 border-b border-amber-200/50 dark:border-amber-800/50">
+          <div className="flex items-center gap-2 text-sm text-amber-800 dark:text-amber-200">
+            <Zap className="w-4 h-4" />
+            <span>Queue paused by interruption. Use "Send Now" or add a new message to resume.</span>
+          </div>
+        </div>
+      )}
+      
+      {/* Message Bubbles */}
+      <div className="p-4 space-y-3 bg-background max-h-80 overflow-y-auto">
+        {queuedMessages.map((message, index) => (
+          <div
+            key={message.id}
+            className="group relative"
+            draggable={onReorderMessages ? true : false}
+            onDragStart={(e) => handleDragStart(e, message.id)}
+            onDragOver={(e) => handleDragOver(e, message.id)}
+            onDragLeave={handleDragLeave}
+            onDrop={(e) => handleDrop(e, message.id)}
+            onDragEnd={handleDragEnd}
+            onMouseEnter={() => setHoveredMessage(message.id)}
+            onMouseLeave={() => setHoveredMessage(null)}
+          >
+            {/* Main message bubble */}
+            <div className={`relative flex items-center gap-3 rounded-xl px-4 py-3 border transition-all duration-300 ease-out ${
+              draggedItem === message.id 
+                ? 'bg-info/20 border-info opacity-60 scale-105 shadow-lg rotate-2' 
+                : dragOverItem === message.id
+                ? 'bg-green-100/80 border-green-400 shadow-lg dark:bg-green-950/50 dark:border-green-600 scale-102'
+                : hoveredMessage === message.id
+                ? 'bg-muted/90 border-border shadow-md scale-101'
+                : 'bg-muted/60 hover:bg-muted/80 border-border/60 hover:border-border dark:border-border/60 dark:hover:border-border'
+            } backdrop-blur-sm`}>
+              
+              {/* Priority indicator */}
+              <div className="flex items-center gap-2">
+                <div className={`flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold transition-colors ${
+                  index === 0 
+                    ? 'bg-blue-500 text-white shadow-md' 
+                    : 'bg-muted text-muted-foreground'
+                }`}>
+                  {index + 1}
+                </div>
+                
+                {/* Drag handle */}
+                {onReorderMessages && (
+                  <div className={`opacity-0 group-hover:opacity-60 hover:opacity-100 transition-all duration-200 cursor-grab active:cursor-grabbing ${
+                    hoveredMessage === message.id ? 'opacity-40' : ''
+                  }`}>
+                    <GripVertical className="w-4 h-4 text-muted-foreground hover:text-foreground" />
+                  </div>
+                )}
+              </div>
+              
+              {/* Message content */}
+              <div className="flex-1 min-w-0">
+                {editingMessage === message.id ? (
+                  <div className="space-y-2">
+                    <textarea
+                      value={editContent}
+                      onChange={(e) => setEditContent(e.target.value)}
+                      className="w-full text-sm bg-background border border-border rounded-md px-2 py-1 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
+                      rows={Math.min(Math.ceil(editContent.length / 60), 4)}
+                      autoFocus
+                    />
+                    <div className="flex gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                          if (onEditMessage) {
+                            onEditMessage(message.id, editContent);
+                          }
+                          setEditingMessage(null);
+                          if (editingMessageIdRef) editingMessageIdRef.current = null;
+                          // Trigger queue processing if system is ready
+                          if (onTriggerQueueProcessing) {
+                            setTimeout(onTriggerQueueProcessing, 100);
+                          }
+                          setEditContent("");
+                        }}
+                        className="h-6 px-2 text-xs"
+                      >
+                        Save
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => {
+                          setEditingMessage(null);
+                          if (editingMessageIdRef) editingMessageIdRef.current = null;
+                          // Trigger queue processing if system is ready
+                          if (onTriggerQueueProcessing) {
+                            setTimeout(onTriggerQueueProcessing, 100);
+                          }
+                          setEditContent("");
+                        }}
+                        className="h-6 px-2 text-xs"
+                      >
+                        Cancel
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  <p 
+                    className="text-sm text-foreground leading-relaxed cursor-pointer hover:bg-muted/30 rounded px-1 py-0.5 transition-colors" 
+                    title={`${message.content} (Click to edit)`}
+                    onClick={() => {
+                      setEditingMessage(message.id);
+                      if (editingMessageIdRef) editingMessageIdRef.current = message.id;
+                      setEditContent(message.content);
+                    }}
+                  >
+                    {message.content.length > 80 
+                      ? `${message.content.substring(0, 80)}...` 
+                      : message.content
+                    }
+                  </p>
+                )}
+              </div>
+              
+              {/* Right side actions */}
+              <div className="flex items-center gap-2 flex-shrink-0">
+                <span className="text-xs text-muted-foreground font-mono">
+                  {formatTimestamp(message.timestamp)}
+                </span>
+                
+                {/* Send Now button - inline */}
+                {onStopAndSend && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onStopAndSend(message.id)}
+                    disabled={editingMessage === message.id}
+                    className={`h-7 w-7 p-0 rounded-full transition-all duration-200 ${
+                      editingMessage === message.id 
+                        ? "opacity-30 cursor-not-allowed" 
+                        : "hover:bg-muted/50"
+                    }`}
+                    title={editingMessage === message.id 
+                      ? "Cannot send while editing" 
+                      : "Stop current processing and send this message now"}
+                  >
+                    <Send className="w-3 h-3" />
+                  </Button>
+                )}
+                
+                {/* Remove button */}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => onRemoveMessage(message.id)}
+                  className="opacity-60 hover:opacity-100 transition-opacity h-6 w-6 p-0 hover:bg-destructive/20 hover:text-destructive rounded-full"
+                  title="Remove this message from queue"
+                >
+                  <X className="w-3 h-3" />
+                </Button>
+              </div>
+            </div>
+            
+            {/* Drop indicator with enhanced visuals */}
+            {dragOverItem === message.id && draggedItem !== message.id && (
+              <div className="absolute inset-0 border-2 border-green-400 rounded-xl pointer-events-none animate-pulse bg-green-100/20 dark:bg-green-900/20" />
+            )}
+            
+            {/* Next up indicator */}
+            {index === 0 && !isPaused && (
+              <div className="absolute -top-2 -right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-full font-medium shadow-md">
+                Next
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+      
+      {/* Drag instructions */}
+      {onReorderMessages && queuedMessages.length > 1 && (
+        <div className="px-4 pb-3 text-xs text-muted-foreground flex items-center gap-2 opacity-60 hover:opacity-100 transition-opacity">
+          <GripVertical className="w-3 h-3" />
+          <span>Drag messages to reorder priority</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MessageQueue;
diff --git a/ui/desktop/src/components/ui/Pill.tsx b/ui/desktop/src/components/ui/Pill.tsx
new file mode 100644
index 000000000000..0454f543fde5
--- /dev/null
+++ b/ui/desktop/src/components/ui/Pill.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+
+interface PillProps {
+  children: React.ReactNode;
+  className?: string;
+  variant?: 'default' | 'glass' | 'solid' | 'gradient' | 'glow';
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  color?: 'blue' | 'green' | 'amber' | 'red' | 'purple' | 'slate';
+  onClick?: () => void;
+  disabled?: boolean;
+  animated?: boolean;
+}
+
+export function Pill({
+  children,
+  className,
+  variant = 'glass',
+  size = 'md',
+  color = 'blue',
+  onClick,
+  disabled = false,
+  animated = false,
+}: PillProps) {
+  const baseStyles = 'inline-flex items-center justify-center rounded-full transition-all duration-300 ease-out font-medium';
+  
+  const variants = {
+    default: 'bg-background border border-border hover:bg-muted/50',
+    glass: 'bg-white/10 dark:bg-black/10 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-lg shadow-black/5 dark:shadow-black/20 hover:bg-white/15 dark:hover:bg-black/15 hover:shadow-xl',
+    solid: 'bg-background border border-border shadow-md hover:shadow-lg hover:scale-105',
+    gradient: 'bg-gradient-to-r shadow-lg hover:shadow-xl hover:scale-105 border-0',
+    glow: 'shadow-lg hover:shadow-xl hover:scale-105 border-0',
+  };
+
+  const colors = {
+    blue: {
+      gradient: 'from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white',
+      glow: 'bg-blue-500 hover:bg-blue-600 text-white shadow-blue-500/25 hover:shadow-blue-500/40',
+      glass: 'text-blue-700 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-200',
+    },
+    green: {
+      gradient: 'from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white',
+      glow: 'bg-green-500 hover:bg-green-600 text-white shadow-green-500/25 hover:shadow-green-500/40',
+      glass: 'text-green-700 dark:text-green-300 hover:text-green-800 dark:hover:text-green-200',
+    },
+    amber: {
+      gradient: 'from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-white',
+      glow: 'bg-amber-500 hover:bg-amber-600 text-white shadow-amber-500/25 hover:shadow-amber-500/40',
+      glass: 'text-amber-700 dark:text-amber-300 hover:text-amber-800 dark:hover:text-amber-200',
+    },
+    red: {
+      gradient: 'from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white',
+      glow: 'bg-red-500 hover:bg-red-600 text-white shadow-red-500/25 hover:shadow-red-500/40',
+      glass: 'text-red-700 dark:text-red-300 hover:text-red-800 dark:hover:text-red-200',
+    },
+    purple: {
+      gradient: 'from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white',
+      glow: 'bg-purple-500 hover:bg-purple-600 text-white shadow-purple-500/25 hover:shadow-purple-500/40',
+      glass: 'text-purple-700 dark:text-purple-300 hover:text-purple-800 dark:hover:text-purple-200',
+    },
+    slate: {
+      gradient: 'from-slate-500 to-slate-600 hover:from-slate-600 hover:to-slate-700 text-white',
+      glow: 'bg-slate-500 hover:bg-slate-600 text-white shadow-slate-500/25 hover:shadow-slate-500/40',
+      glass: 'text-slate-700 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200',
+    },
+  };
+
+  const sizes = {
+    xs: 'px-2 py-1 text-xs gap-1',
+    sm: 'px-3 py-1.5 text-sm gap-1.5',
+    md: 'px-4 py-2 text-sm gap-2',
+    lg: 'px-6 py-3 text-base gap-3',
+  };
+
+  const animatedStyles = animated ? 'animate-pulse' : '';
+  
+  const disabledStyles = disabled 
+    ? 'opacity-50 cursor-not-allowed pointer-events-none' 
+    : onClick 
+      ? 'cursor-pointer hover:scale-105 active:scale-95' 
+      : '';
+
+  const colorStyles = variant === 'gradient' 
+    ? colors[color].gradient 
+    : variant === 'glow' 
+      ? colors[color].glow
+      : variant === 'glass'
+        ? colors[color].glass
+        : '';
+
+  return (
+    <div
+      className={cn(
+        baseStyles,
+        variants[variant],
+        sizes[size],
+        colorStyles,
+        disabledStyles,
+        animatedStyles,
+        className
+      )}
+      onClick={onClick && !disabled ? onClick : undefined}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Pill;
diff --git a/ui/desktop/src/utils/interruptionDetector.ts b/ui/desktop/src/utils/interruptionDetector.ts
new file mode 100644
index 000000000000..a441cdf6a812
--- /dev/null
+++ b/ui/desktop/src/utils/interruptionDetector.ts
@@ -0,0 +1,132 @@
+/**
+ * Utility for detecting interruption keywords in user input
+ */
+
+export interface InterruptionKeyword {
+  keyword: string;
+  variations: string[];
+  priority: 'high' | 'medium' | 'low';
+  action: 'stop' | 'pause' | 'redirect';
+}
+
+// Define interruption keywords and their variations
+export const INTERRUPTION_KEYWORDS: InterruptionKeyword[] = [
+  {
+    keyword: 'stop',
+    variations: ['stop', 'halt', 'cease', 'quit', 'end', 'abort', 'cancel'],
+    priority: 'high',
+    action: 'stop'
+  },
+  {
+    keyword: 'wait',
+    variations: ['wait', 'hold', 'pause', 'hold on', 'wait up', 'hold up'],
+    priority: 'high', 
+    action: 'pause'
+  },
+  {
+    keyword: 'no',
+    variations: ['no', 'nope', 'nah', 'wrong', 'incorrect', 'not right'],
+    priority: 'medium',
+    action: 'stop'
+  },
+  {
+    keyword: 'actually',
+    variations: ['actually', 'instead', 'rather', 'better idea', 'change of plans'],
+    priority: 'medium',
+    action: 'redirect'
+  },
+  {
+    keyword: 'nevermind',
+    variations: ['nevermind', 'never mind', 'forget it', 'ignore that', 'disregard'],
+    priority: 'medium',
+    action: 'stop'
+  }
+];
+
+export interface InterruptionMatch {
+  keyword: InterruptionKeyword;
+  matchedText: string;
+  confidence: number;
+  shouldInterrupt: boolean;
+}
+
+/**
+ * Analyzes input text for interruption keywords
+ */
+export function detectInterruption(input: string): InterruptionMatch | null {
+  if (!input || input.trim().length === 0) {
+    return null;
+  }
+
+  const normalizedInput = input.toLowerCase().trim();
+  
+  // Check for exact matches first (highest confidence)
+  for (const keyword of INTERRUPTION_KEYWORDS) {
+    for (const variation of keyword.variations) {
+      if (normalizedInput === variation) {
+        return {
+          keyword,
+          matchedText: variation,
+          confidence: 1.0,
+          shouldInterrupt: true
+        };
+      }
+    }
+  }
+
+  // Check for matches at the beginning of input (high confidence)
+  for (const keyword of INTERRUPTION_KEYWORDS) {
+    for (const variation of keyword.variations) {
+      if (normalizedInput.startsWith(variation + ' ') || normalizedInput.startsWith(variation + ',')) {
+        return {
+          keyword,
+          matchedText: variation,
+          confidence: 0.9,
+          shouldInterrupt: true
+        };
+      }
+    }
+  }
+
+  // Check for matches anywhere in short inputs (medium confidence)
+  if (normalizedInput.length <= 20) {
+    for (const keyword of INTERRUPTION_KEYWORDS) {
+      for (const variation of keyword.variations) {
+        if (normalizedInput.includes(variation)) {
+          return {
+            keyword,
+            matchedText: variation,
+            confidence: 0.7,
+            shouldInterrupt: keyword.priority === 'high'
+          };
+        }
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Checks if input is likely an interruption command
+ */
+export function isInterruptionCommand(input: string): boolean {
+  const match = detectInterruption(input);
+  return match?.shouldInterrupt ?? false;
+}
+
+/**
+ * Gets a user-friendly message for the interruption action
+ */
+export function getInterruptionMessage(match: InterruptionMatch): string {
+  switch (match.keyword.action) {
+    case 'stop':
+      return `Stopped processing. You said "${match.matchedText}".`;
+    case 'pause':
+      return `Paused processing. You said "${match.matchedText}".`;
+    case 'redirect':
+      return `Stopping to redirect. You said "${match.matchedText}".`;
+    default:
+      return `Interrupted processing. You said "${match.matchedText}".`;
+  }
+}
diff --git a/ui/desktop/src/utils/queueStorage.ts b/ui/desktop/src/utils/queueStorage.ts
new file mode 100644
index 000000000000..0eba07cd5ddb
--- /dev/null
+++ b/ui/desktop/src/utils/queueStorage.ts
@@ -0,0 +1,97 @@
+export interface QueuedMessage {
+  id: string;
+  content: string;
+  timestamp: number;
+}
+
+const QUEUE_STORAGE_KEY = 'goose-message-queue';
+const MAX_QUEUE_SIZE = 50;
+const QUEUE_EXPIRY_HOURS = 24;
+
+export class QueueStorage {
+  private static getStoredQueue(): QueuedMessage[] {
+    try {
+      const stored = localStorage.getItem(QUEUE_STORAGE_KEY);
+      if (!stored) return [];
+
+      const queue = JSON.parse(stored) as QueuedMessage[];
+      const now = Date.now();
+      const expiryTime = now - QUEUE_EXPIRY_HOURS * 60 * 60 * 1000;
+
+      // Filter out expired messages and limit to max count
+      const validMessages = queue
+        .filter((msg) => msg.timestamp > expiryTime)
+        .slice(0, MAX_QUEUE_SIZE);
+
+      // If we filtered any messages, update storage
+      if (validMessages.length !== queue.length) {
+        this.setStoredQueue(validMessages);
+      }
+
+      return validMessages;
+    } catch (error) {
+      console.error('Error reading message queue:', error);
+      return [];
+    }
+  }
+
+  private static setStoredQueue(queue: QueuedMessage[]) {
+    try {
+      localStorage.setItem(QUEUE_STORAGE_KEY, JSON.stringify(queue));
+    } catch (error) {
+      console.error('Error saving message queue:', error);
+    }
+  }
+
+  static saveQueue(queue: QueuedMessage[]) {
+    // Only save non-empty queues, clear storage if empty
+    if (queue.length === 0) {
+      this.clearQueue();
+      return;
+    }
+
+    // Limit queue size and remove expired messages
+    const now = Date.now();
+    const expiryTime = now - QUEUE_EXPIRY_HOURS * 60 * 60 * 1000;
+    
+    const validQueue = queue
+      .filter((msg) => msg.timestamp > expiryTime)
+      .slice(0, MAX_QUEUE_SIZE);
+
+    this.setStoredQueue(validQueue);
+  }
+
+  static loadQueue(): QueuedMessage[] {
+    return this.getStoredQueue();
+  }
+
+  static clearQueue() {
+    localStorage.removeItem(QUEUE_STORAGE_KEY);
+  }
+
+  static addMessage(message: QueuedMessage) {
+    const queue = this.getStoredQueue();
+    queue.push(message);
+    this.saveQueue(queue);
+  }
+
+  static removeMessage(messageId: string) {
+    const queue = this.getStoredQueue();
+    const updatedQueue = queue.filter(msg => msg.id !== messageId);
+    this.saveQueue(updatedQueue);
+  }
+
+  static updateMessage(messageId: string, newContent: string) {
+    const queue = this.getStoredQueue();
+    const updatedQueue = queue.map(msg => 
+      msg.id === messageId 
+        ? { ...msg, content: newContent.trim(), timestamp: Date.now() }
+        : msg
+    );
+    this.saveQueue(updatedQueue);
+  }
+
+  static reorderQueue(reorderedQueue: QueuedMessage[]) {
+    this.saveQueue(reorderedQueue);
+  }
+}