Refine queue UI and input handling

Author: brandonkachen

cli/src/chat.tsx

@@ -1,4 +1,3 @@
-import { TextAttributes } from '@opentui/core'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 
@@ -32,15 +31,15 @@ import { useSuggestionMenuHandlers } from './hooks/use-suggestion-menu-handlers'
 import { useTerminalDimensions } from './hooks/use-terminal-dimensions'
 import { useTheme } from './hooks/use-theme'
 import { useValidationBanner } from './hooks/use-validation-banner'
+import { useQueueUi } from './hooks/use-queue-ui'
+import { useQueueControls } from './hooks/use-queue-controls'
 import { useChatStore } from './state/chat-store'
 import { createChatScrollAcceleration } from './utils/chat-scroll-accel'
-import { formatQueuedPreview } from './utils/helpers'
 import { loadLocalAgents } from './utils/local-agent-registry'
 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 { pluralize } from '@codebuff/common/util/string'
 
 import type { ContentBlock } from './types/chat'
 import type { SendMessageFn } from './types/contracts/send-message'
@@ -363,27 +362,31 @@ export const Chat = ({
     activeAgentStreamsRef,
   )
 
+  const {
+    queuedCount,
+    shouldShowQueuePreview,
+    queuePreviewTitle,
+    pausedQueueText,
+    inputPlaceholder,
+  } = useQueueUi({
+    queuePaused,
+    queuedMessages,
+    separatorWidth,
+    terminalWidth,
+  })
+
   const { handleCtrlC: baseHandleCtrlC, nextCtrlCWillExit } = useExitHandler({
     inputValue,
     setInputValue,
   })
 
-  const handleCtrlC = useCallback(() => {
-    if (queuePaused && queuedMessages.length > 0) {
-      clearQueue()
-      resumeQueue()
-      return true
-    }
-    return baseHandleCtrlC()
-  }, [
-    baseHandleCtrlC,
-    clearQueue,
+  const { handleCtrlC, ensureQueueActiveBeforeSubmit } = useQueueControls({
     queuePaused,
-    queuedMessages.length,
+    queuedCount,
+    clearQueue,
     resumeQueue,
-  ])
-
-  const [scrollIndicatorHovered, setScrollIndicatorHovered] = useState(false)
+    baseHandleCtrlC,
+  })
 
   // Derive boolean flags from streamStatus for convenience
   const isWaitingForResponse = streamStatus === 'waiting'
@@ -438,9 +441,7 @@ export const Chat = ({
   })
 
   const handleSubmit = useCallback(() => {
-    if (queuePaused) {
-      resumeQueue()
-    }
+    ensureQueueActiveBeforeSubmit()
 
     return routeUserPrompt({
       abortControllerRef,
@@ -467,21 +468,29 @@ export const Chat = ({
       stopStreaming,
     })
   }, [
+    abortControllerRef,
     agentMode,
+    inputRef,
     inputValue,
+    isChainInProgressRef,
     isStreaming,
-    sendMessage,
-    saveToHistory,
-    addToQueue,
+    logoutMutation,
     streamMessageIdRef,
-    isChainInProgressRef,
-    scrollToLatest,
-    handleCtrlC,
+    addToQueue,
+    clearMessages,
     clearQueue,
-    queuedMessages,
-    pauseQueue,
-    queuePaused,
-    resumeQueue,
+    handleCtrlC,
+    saveToHistory,
+    scrollToLatest,
+    sendMessage,
+    setCanProcessQueue,
+    setInputFocused,
+    setInputValue,
+    setIsAuthenticated,
+    setMessages,
+    setUser,
+    stopStreaming,
+    ensureQueueActiveBeforeSubmit,
   ])
 
   const totalMentionMatches = agentMatches.length + fileMatches.length
@@ -546,28 +555,6 @@ export const Chat = ({
       </text>
     ) : null
 
-  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 `${pluralize(count, 'message')} queued — your message sends first`
-  }, [queuePaused, queuedMessages.length])
-  const inputPlaceholder = useMemo(() => {
-    const base =
-      terminalWidth < 65
-        ? 'Enter a coding task'
-        : 'Enter a coding task or / for commands'
-    if (queuePaused && queuedMessages.length > 0) {
-      return 'Ctrl-C to cancel queued messages'
-    }
-    return base
-  }, [queuePaused, queuedMessages.length, terminalWidth])
   const hasSlashSuggestions =
     slashContext.active && slashSuggestionItems.length > 0
   const hasMentionSuggestions =
@@ -709,8 +696,6 @@ export const Chat = ({
             isConnected={isConnected}
             isAtBottom={isAtBottom}
             scrollToLatest={scrollToLatest}
-            scrollIndicatorHovered={scrollIndicatorHovered}
-            setScrollIndicatorHovered={setScrollIndicatorHovered}
           />
         )}
 

cli/src/components/multiline-input.tsx

@@ -234,6 +234,35 @@ export const MultilineInput = forwardRef<
     return ((textRef.current as any).textBufferView as TextBufferView).lineInfo
   }, [])
 
+  const insertTextAtCursor = useCallback(
+    (textToInsert: string) => {
+      if (!textToInsert) return
+      const newValue =
+        value.slice(0, cursorPosition) +
+        textToInsert +
+        value.slice(cursorPosition)
+      onChange({
+        text: newValue,
+        cursorPosition: cursorPosition + textToInsert.length,
+        lastEditDueToNav: false,
+      })
+    },
+    [cursorPosition, onChange, value],
+  )
+
+  const moveCursor = useCallback(
+    (nextPosition: number) => {
+      const clamped = Math.max(0, Math.min(value.length, nextPosition))
+      if (clamped === cursorPosition) return
+      onChange({
+        text: value,
+        cursorPosition: clamped,
+        lastEditDueToNav: false,
+      })
+    },
+    [cursorPosition, onChange, value],
+  )
+
   const isPlaceholder = value.length === 0 && placeholder.length > 0
   const displayValue = isPlaceholder ? placeholder : value
   const showCursor = focused
@@ -621,22 +650,14 @@ export const MultilineInput = forwardRef<
         // Left arrow (no modifiers)
         if (key.name === 'left' && !key.ctrl && !key.meta && !key.option) {
           preventKeyDefault(key)
-          onChange({
-            text: value,
-            cursorPosition: cursorPosition - 1,
-            lastEditDueToNav: false,
-          })
+          moveCursor(cursorPosition - 1)
           return
         }
 
         // Right arrow (no modifiers)
         if (key.name === 'right' && !key.ctrl && !key.meta && !key.option) {
           preventKeyDefault(key)
-          onChange({
-            text: value,
-            cursorPosition: cursorPosition + 1,
-            lastEditDueToNav: false,
-          })
+          moveCursor(cursorPosition + 1)
           return
         }
 
@@ -681,15 +702,7 @@ export const MultilineInput = forwardRef<
           !key.option
         ) {
           preventKeyDefault(key)
-          const newValue =
-            value.slice(0, cursorPosition) +
-            '\t' +
-            value.slice(cursorPosition)
-          onChange({
-            text: newValue,
-            cursorPosition: cursorPosition + 1,
-            lastEditDueToNav: false,
-          })
+          insertTextAtCursor('\t')
           return
         }
 
@@ -703,15 +716,7 @@ export const MultilineInput = forwardRef<
           !CONTROL_CHAR_REGEX.test(key.sequence)
         ) {
           preventKeyDefault(key)
-          const newValue =
-            value.slice(0, cursorPosition) +
-            key.sequence +
-            value.slice(cursorPosition)
-          onChange({
-            text: newValue,
-            cursorPosition: cursorPosition + 1,
-            lastEditDueToNav: false,
-          })
+          insertTextAtCursor(key.sequence)
           return
         }
       },
@@ -724,6 +729,8 @@ export const MultilineInput = forwardRef<
         onChange,
         onSubmit,
         onKeyIntercept,
+        insertTextAtCursor,
+        moveCursor,
       ],
     ),
   )

cli/src/components/scroll-to-bottom-button.tsx

@@ -0,0 +1,34 @@
+import { TextAttributes } from '@opentui/core'
+import { useState } from 'react'
+
+import { Button } from './button'
+import { useTheme } from '../hooks/use-theme'
+
+interface ScrollToBottomButtonProps {
+  onClick: () => void
+}
+
+export const ScrollToBottomButton = ({
+  onClick,
+}: ScrollToBottomButtonProps) => {
+  const theme = useTheme()
+  const [hovered, setHovered] = useState(false)
+
+  return (
+    <Button
+      style={{ paddingLeft: 2, paddingRight: 2 }}
+      onClick={onClick}
+      onMouseOver={() => setHovered(true)}
+      onMouseOut={() => setHovered(false)}
+    >
+      <text>
+        <span
+          fg={theme.info}
+          attributes={hovered ? TextAttributes.BOLD : TextAttributes.DIM}
+        >
+          {hovered ? '↓ Scroll to bottom ↓' : '↓'}
+        </span>
+      </text>
+    </Button>
+  )
+}

cli/src/components/status-bar.tsx

@@ -1,8 +1,7 @@
-import { TextAttributes } from '@opentui/core'
 import React, { useEffect, useState } from 'react'
 
-import { Button } from './button'
 import { ShimmerText } from './shimmer-text'
+import { ScrollToBottomButton } from './scroll-to-bottom-button'
 import { useTheme } from '../hooks/use-theme'
 import { formatElapsedTime } from '../utils/format-elapsed-time'
 
@@ -18,8 +17,6 @@ interface StatusBarProps {
   isConnected: boolean
   isAtBottom: boolean
   scrollToLatest: () => void
-  scrollIndicatorHovered: boolean
-  setScrollIndicatorHovered: (hovered: boolean) => void
 }
 
 export const StatusBar = ({
@@ -30,8 +27,6 @@ export const StatusBar = ({
   isConnected,
   isAtBottom,
   scrollToLatest,
-  scrollIndicatorHovered,
-  setScrollIndicatorHovered,
 }: StatusBarProps) => {
   const theme = useTheme()
   const [elapsedSeconds, setElapsedSeconds] = useState(0)
@@ -125,27 +120,7 @@ export const StatusBar = ({
       </box>
 
       <box style={{ flexShrink: 0 }}>
-        {!isAtBottom && (
-          <Button
-            style={{ paddingLeft: 2, paddingRight: 2 }}
-            onClick={() => scrollToLatest()}
-            onMouseOver={() => setScrollIndicatorHovered(true)}
-            onMouseOut={() => setScrollIndicatorHovered(false)}
-          >
-            <text>
-              <span
-                fg={theme.info}
-                attributes={
-                  scrollIndicatorHovered
-                    ? TextAttributes.BOLD
-                    : TextAttributes.DIM
-                }
-              >
-                {scrollIndicatorHovered ? '↓ Scroll to bottom ↓' : '↓'}
-              </span>
-            </text>
-          </Button>
-        )}
+        {!isAtBottom && <ScrollToBottomButton onClick={scrollToLatest} />}
       </box>
 
       <box

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

@@ -0,0 +1,36 @@
+import { useCallback } from 'react'
+
+interface UseQueueControlsParams {
+  queuePaused: boolean
+  queuedCount: number
+  clearQueue: () => string[]
+  resumeQueue: () => void
+  baseHandleCtrlC: () => true
+}
+
+export const useQueueControls = ({
+  queuePaused,
+  queuedCount,
+  clearQueue,
+  resumeQueue,
+  baseHandleCtrlC,
+}: UseQueueControlsParams) => {
+  const handleCtrlC = useCallback(() => {
+    if (queuePaused && queuedCount > 0) {
+      clearQueue()
+      resumeQueue()
+      return true
+    }
+    return baseHandleCtrlC()
+  }, [baseHandleCtrlC, clearQueue, queuePaused, queuedCount, resumeQueue])
+
+  const ensureQueueActiveBeforeSubmit = useCallback(() => {
+    if (queuePaused) {
+      resumeQueue()
+      return true
+    }
+    return false
+  }, [queuePaused, resumeQueue])
+
+  return { handleCtrlC, ensureQueueActiveBeforeSubmit }
+}