feat: add paused queue UX with bottom border display

- Queue pauses on Ctrl-C/Escape during response (only if non-empty) -
Paused queue shows in styled bottom border with message preview - Queue
auto-resumes after next successful message send - Pause state prevents
unwanted auto-sends after interrupt

Author: brandonkachen

cli/src/chat.tsx

@@ -16,7 +16,6 @@ import {
   getStatusIndicatorState,
 } from './components/status-indicator'
 import { SuggestionMenu } from './components/suggestion-menu'
-import { Button } from './components/button'
 import { SLASH_COMMANDS } from './data/slash-commands'
 import { useAgentValidation } from './hooks/use-agent-validation'
 import { useAuthState } from './hooks/use-auth-state'
@@ -44,6 +43,7 @@ import { buildMessageTree } from './utils/message-tree-utils'
 import { computeInputLayoutMetrics } from './utils/text-layout'
 import { createMarkdownPalette } from './utils/theme-system'
 import { BORDER_CHARS } from './utils/ui-constants'
+import { Button } from './components/button'
 
 import type { ContentBlock } from './types/chat'
 import type { SendMessageFn } from './types/contracts/send-message'
@@ -365,12 +365,17 @@ export const Chat = ({
   const {
     queuedMessages,
     streamStatus,
+    queuePaused,
     streamMessageIdRef,
     addToQueue,
     startStreaming,
     stopStreaming,
     setStreamStatus,
     setCanProcessQueue,
+    pauseQueue,
+    resumeQueue,
+    clearQueue,
+    isQueuePausedRef,
   } = useMessageQueue(
     (content: string) =>
       sendMessageRef.current?.({ content, agentMode }) ?? Promise.resolve(),
@@ -414,6 +419,8 @@ export const Chat = ({
     lastMessageMode,
     setLastMessageMode,
     addSessionCredits,
+    isQueuePausedRef,
+    resumeQueue,
   })
 
   sendMessageRef.current = sendMessage
@@ -441,6 +448,7 @@ export const Chat = ({
         streamMessageIdRef,
         addToQueue,
         clearMessages,
+        clearQueue,
         handleCtrlC,
         saveToHistory,
         scrollToLatest,
@@ -464,6 +472,9 @@ export const Chat = ({
       isChainInProgressRef,
       scrollToLatest,
       handleCtrlC,
+      clearQueue,
+      queuedMessages,
+      pauseQueue,
     ],
   )
 
@@ -496,6 +507,11 @@ export const Chat = ({
     navigateDown,
     toggleAgentMode,
     onCtrlC: handleCtrlC,
+    onInterrupt: () => {
+      if (queuedMessages.length > 0) {
+        pauseQueue()
+      }
+    },
     historyNavUpEnabled,
     historyNavDownEnabled,
   })
@@ -524,12 +540,22 @@ export const Chat = ({
       </text>
     ) : null
 
-  const shouldShowQueuePreview = queuedMessages.length > 0
+  const shouldShowQueuePreview = queuedMessages.length > 0 && !queuePaused
   const queuePreviewTitle = useMemo(() => {
     if (!shouldShowQueuePreview) return undefined
     const previewWidth = Math.max(30, separatorWidth - 20)
     return formatQueuedPreview(queuedMessages, previewWidth)
   }, [queuedMessages, separatorWidth, shouldShowQueuePreview])
+
+  const pausedQueueText = useMemo(() => {
+    if (!queuePaused || queuedMessages.length === 0) return undefined
+    const count = queuedMessages.length
+    return `${count} queued — your next message sends first`
+  }, [queuePaused, queuedMessages])
+
+  const handleClearQueue = useCallback(() => {
+    clearQueue()
+  }, [clearQueue])
   const hasSlashSuggestions =
     slashContext.active && slashSuggestionItems.length > 0
   const hasMentionSuggestions =
@@ -836,6 +862,32 @@ export const Chat = ({
             )}
           </box>
         </box>
+
+        {/* Paused queue indicator - fake bottom border continuation */}
+        {pausedQueueText && (
+          <box style={{ width: '100%' }}>
+            <box style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <text style={{ wrapMode: 'none', flexGrow: 1 }}>
+                <span fg={theme.warning}>
+                  {BORDER_CHARS.vertical} ⏸ {pausedQueueText}
+                </span>
+              </text>
+              <Button onClick={handleClearQueue} style={{ paddingRight: 1 }}>
+                <text>
+                  <span fg={theme.error}>✕</span>
+                </text>
+              </Button>
+              <text style={{ wrapMode: 'none' }}>
+                <span fg={theme.warning}>{BORDER_CHARS.vertical}</span>
+              </text>
+            </box>
+            <text style={{ wrapMode: 'none' }}>
+              <span fg={theme.warning}>
+                {BORDER_CHARS.bottomLeft}{BORDER_CHARS.horizontal.repeat(separatorWidth - 2)}{BORDER_CHARS.bottomRight}
+              </span>
+            </text>
+          </box>
+        )}
       </box>
 
       {/* Login Modal Overlay - show when not authenticated and done checking */}

cli/src/commands/router.ts

@@ -22,6 +22,7 @@ export async function routeUserPrompt(params: {
   streamMessageIdRef: React.MutableRefObject<string | null>
   addToQueue: (message: string) => void
   clearMessages: () => void
+  clearQueue: () => string[]
   handleCtrlC: () => true
   saveToHistory: (message: string) => void
   scrollToLatest: () => void
@@ -49,6 +50,7 @@ export async function routeUserPrompt(params: {
     streamMessageIdRef,
     addToQueue,
     clearMessages,
+    clearQueue,
     handleCtrlC,
     saveToHistory,
     scrollToLatest,

cli/src/hooks/use-keyboard-handlers.ts

@@ -16,6 +16,7 @@ interface KeyboardHandlersConfig {
   navigateDown: () => void
   toggleAgentMode: () => void
   onCtrlC: () => boolean
+  onInterrupt: () => void
   historyNavUpEnabled: boolean
   historyNavDownEnabled: boolean
 }
@@ -33,6 +34,7 @@ export const useKeyboardHandlers = ({
   navigateDown,
   toggleAgentMode,
   onCtrlC,
+  onInterrupt,
   historyNavUpEnabled,
   historyNavDownEnabled,
 }: KeyboardHandlersConfig) => {
@@ -53,6 +55,7 @@ export const useKeyboardHandlers = ({
           if (abortControllerRef.current) {
             abortControllerRef.current.abort()
           }
+          onInterrupt()
 
           return
         }
@@ -68,7 +71,7 @@ export const useKeyboardHandlers = ({
           }
         }
       },
-      [isStreaming, isWaitingForResponse, abortControllerRef, onCtrlC],
+      [isStreaming, isWaitingForResponse, abortControllerRef, onCtrlC, onInterrupt],
     ),
   )
 

cli/src/hooks/use-message-queue.ts

@@ -10,16 +10,22 @@ export const useMessageQueue = (
   const [queuedMessages, setQueuedMessages] = useState<string[]>([])
   const [streamStatus, setStreamStatus] = useState<StreamStatus>('idle')
   const [canProcessQueue, setCanProcessQueue] = useState<boolean>(true)
+  const [queuePaused, setQueuePaused] = useState<boolean>(false)
 
   const queuedMessagesRef = useRef<string[]>([])
   const streamTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const streamIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
   const streamMessageIdRef = useRef<string | null>(null)
+  const isQueuePausedRef = useRef<boolean>(false)
 
   useEffect(() => {
     queuedMessagesRef.current = queuedMessages
   }, [queuedMessages])
 
+  useEffect(() => {
+    isQueuePausedRef.current = queuePaused
+  }, [queuePaused])
+
   const clearStreaming = useCallback(() => {
     if (streamTimeoutRef.current) {
       clearTimeout(streamTimeoutRef.current)
@@ -41,7 +47,7 @@ export const useMessageQueue = (
   }, [clearStreaming])
 
   useEffect(() => {
-    if (!canProcessQueue) return
+    if (!canProcessQueue || queuePaused) return
     if (streamStatus !== 'idle') return
     if (streamMessageIdRef.current) return
     if (isChainInProgressRef.current) return
@@ -61,6 +67,7 @@ export const useMessageQueue = (
     return () => clearTimeout(timeoutId)
   }, [
     canProcessQueue,
+    queuePaused,
     streamStatus,
     sendMessage,
     isChainInProgressRef,
@@ -73,26 +80,48 @@ export const useMessageQueue = (
     setQueuedMessages(newQueue)
   }, [])
 
+  const pauseQueue = useCallback(() => {
+    setQueuePaused(true)
+    setCanProcessQueue(false)
+  }, [])
+
+  const resumeQueue = useCallback(() => {
+    setQueuePaused(false)
+    setCanProcessQueue(true)
+  }, [])
+
+  const clearQueue = useCallback(() => {
+    const current = queuedMessagesRef.current
+    queuedMessagesRef.current = []
+    setQueuedMessages([])
+    return current
+  }, [])
+
   const startStreaming = useCallback(() => {
     setStreamStatus('streaming')
     setCanProcessQueue(false)
   }, [])
 
   const stopStreaming = useCallback(() => {
     setStreamStatus('idle')
-    setCanProcessQueue(true)
-  }, [])
+    setCanProcessQueue(!queuePaused)
+  }, [queuePaused])
 
   return {
     queuedMessages,
     streamStatus,
     canProcessQueue,
+    queuePaused,
     streamMessageIdRef,
     addToQueue,
     startStreaming,
     stopStreaming,
     setStreamStatus,
     clearStreaming,
     setCanProcessQueue,
+    pauseQueue,
+    resumeQueue,
+    clearQueue,
+    isQueuePausedRef,
   }
 }

cli/src/hooks/use-send-message.ts

@@ -233,6 +233,8 @@ interface UseSendMessageOptions {
   lastMessageMode: AgentMode | null
   setLastMessageMode: (mode: AgentMode | null) => void
   addSessionCredits: (credits: number) => void
+  isQueuePausedRef?: React.MutableRefObject<boolean>
+  resumeQueue?: () => void
 }
 
 export const useSendMessage = ({
@@ -264,6 +266,8 @@ export const useSendMessage = ({
   lastMessageMode,
   setLastMessageMode,
   addSessionCredits,
+  isQueuePausedRef,
+  resumeQueue,
 }: UseSendMessageOptions): {
   sendMessage: SendMessageFn
   clearMessages: () => void
@@ -785,7 +789,7 @@ export const useSendMessage = ({
       abortControllerRef.current = abortController
       abortController.signal.addEventListener('abort', () => {
         setStreamStatus('idle')
-        setCanProcessQueue(true)
+        setCanProcessQueue(!isQueuePausedRef?.current)
         updateChainInProgress(false)
         timerController.stop('aborted')
 
@@ -1581,6 +1585,9 @@ export const useSendMessage = ({
         }
 
         setStreamStatus('idle')
+        if (resumeQueue) {
+          resumeQueue()
+        }
         setCanProcessQueue(true)
         updateChainInProgress(false)
         const timerResult = timerController.stop('success')
@@ -1675,6 +1682,7 @@ export const useSendMessage = ({
       lastMessageMode,
       setLastMessageMode,
       addSessionCredits,
+      resumeQueue,
     ],
   )