refactor(cli): use homegrown clipboard reading for paste handling

- MultilineInput now forwards paste events to parent via onPaste callback
- Added createTextPasteHandler and createPasteHandler utilities in strings.ts
- Main chat uses createPasteHandler (with image support)
- Feedback and ask-user inputs use createTextPasteHandler (text only)
- All paste logic uses homegrown readClipboardText() with OpenTUI fallback

Author: brandonkachen

cli/src/chat.tsx

@@ -49,6 +49,7 @@ import { addClipboardPlaceholder, addPendingImageFromFile } from './utils/add-pe
 import { createChatScrollAcceleration } from './utils/chat-scroll-accel'
 import { showClipboardMessage } from './utils/clipboard'
 import { readClipboardImage } from './utils/clipboard-image'
+import { createPasteHandler } from './utils/strings'
 import { getInputModeConfig } from './utils/input-modes'
 import {
   type ChatKeyboardState,
@@ -716,7 +717,16 @@ export const Chat = ({
     handleExitFeedback()
   }, [closeFeedback, handleExitFeedback])
 
-
+  // Ensure bracketed paste events target the active chat input
+  useEffect(() => {
+    if (feedbackMode) {
+      inputRef.current?.focus()
+      return
+    }
+    if (!askUserState) {
+      inputRef.current?.focus()
+    }
+  }, [feedbackMode, askUserState, inputRef])
 
   const handleSubmit = useCallback(async () => {
     ensureQueueActiveBeforeSubmit()
@@ -1225,6 +1235,12 @@ export const Chat = ({
           feedbackMode={feedbackMode}
           handleExitFeedback={handleExitFeedback}
           handleSubmit={handleSubmit}
+          onPaste={createPasteHandler({
+            text: inputValue,
+            cursorPosition,
+            onChange: setInputValue,
+            onPasteImage: chatKeyboardHandlers.onPasteImage,
+          })}
         />
       </box>
     </box>

cli/src/components/ask-user/components/other-text-input.tsx

@@ -9,6 +9,7 @@ import { useTheme } from '../../../hooks/use-theme'
 import { Button } from '../../button'
 import { MultilineInput } from '../../multiline-input'
 import { SYMBOLS } from '../constants'
+import { createTextPasteHandler } from '../../../utils/strings'
 
 import type { InputValue } from '../../../state/chat-store'
 
@@ -100,6 +101,7 @@ export const OtherTextInput: React.FC<OtherTextInputProps> = ({
           onChange={onChange}
           onSubmit={onSubmit}
           onKeyIntercept={handleKeyIntercept}
+          onPaste={createTextPasteHandler(text, cursorPosition, onChange)}
           placeholder={placeholder}
           focused={isFocused}
           maxHeight={3}

cli/src/components/chat-input-bar.tsx

@@ -57,8 +57,11 @@ interface ChatInputBarProps {
 
   // Feedback mode
   feedbackMode: boolean
-  handleExitFeedback: () => void // Handlers
+  handleExitFeedback: () => void
+
+  // Handlers
   handleSubmit: () => Promise<void>
+  onPaste: (fallbackText?: string) => void
 }
 
 export const ChatInputBar = ({
@@ -91,6 +94,7 @@ export const ChatInputBar = ({
   feedbackMode,
   handleExitFeedback,
   handleSubmit,
+  onPaste,
 }: ChatInputBarProps) => {
   const inputMode = useChatStore((state) => state.inputMode)
   const setInputMode = useChatStore((state) => state.setInputMode)
@@ -324,6 +328,7 @@ export const ChatInputBar = ({
             value={inputValue}
             onChange={handleInputChange}
             onSubmit={handleSubmit}
+            onPaste={onPaste}
             onKeyIntercept={handleKeyIntercept}
             placeholder={effectivePlaceholder}
             focused={inputFocused && !feedbackMode}
@@ -406,6 +411,7 @@ export const ChatInputBar = ({
                 value={inputValue}
                 onChange={handleInputChange}
                 onSubmit={handleSubmit}
+                onPaste={onPaste}
                 onKeyIntercept={handleKeyIntercept}
                 placeholder={effectivePlaceholder}
                 focused={inputFocused && !feedbackMode}

cli/src/components/feedback-container.tsx

@@ -1,5 +1,5 @@
 import { AnalyticsEvent } from '@codebuff/common/constants/analytics-events'
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 
 import { FeedbackInputMode } from './feedback-input-mode'
@@ -62,8 +62,6 @@ export const FeedbackContainer: React.FC<FeedbackContainerProps> = ({
     })),
   )
 
-  const previousFeedbackModeRef = useRef(feedbackMode)
-
   const buildMessageContext = useCallback(
     (targetMessageId: string | null) => {
       const target = targetMessageId
@@ -154,11 +152,8 @@ export const FeedbackContainer: React.FC<FeedbackContainerProps> = ({
   }, [closeFeedback, onExitFeedback])
 
   useEffect(() => {
-    if (feedbackMode !== previousFeedbackModeRef.current) {
-      previousFeedbackModeRef.current = feedbackMode
-      if (inputRef.current) {
-        inputRef.current.focus()
-      }
+    if (feedbackMode && inputRef.current) {
+      inputRef.current.focus()
     }
   }, [feedbackMode, inputRef])
 

cli/src/components/feedback-input-mode.tsx

@@ -7,6 +7,7 @@ import { Separator } from './separator'
 import { useTheme } from '../hooks/use-theme'
 import { useChatStore } from '../state/chat-store'
 import { BORDER_CHARS } from '../utils/ui-constants'
+import { createTextPasteHandler } from '../utils/strings'
 
 type CategoryHighlightKey = 'success' | 'error' | 'warning' | 'info'
 
@@ -114,6 +115,10 @@ const FeedbackTextSection: React.FC<FeedbackTextSectionProps> = ({
             onCursorChange(cursor + 1)
             return true
           }}
+          onPaste={createTextPasteHandler(value, cursor, ({ text, cursorPosition }) => {
+            onChange(text)
+            onCursorChange(cursorPosition)
+          })}
           placeholder={placeholder}
           focused={inputFocused}
           maxHeight={5}

cli/src/components/multiline-input.tsx

@@ -19,7 +19,6 @@ import { calculateNewCursorPosition } from '../utils/word-wrap-utils'
 import type { InputValue } from '../state/chat-store'
 import type {
   KeyEvent,
-  PasteEvent,
   ScrollBoxRenderable,
   TextBufferView,
   TextRenderable,
@@ -94,6 +93,7 @@ interface MultilineInputProps {
   onChange: (value: InputValue) => void
   onSubmit: () => void
   onKeyIntercept?: (key: KeyEvent) => boolean
+  onPaste: (fallbackText?: string) => void
   placeholder?: string
   focused?: boolean
   shouldBlinkCursor?: boolean
@@ -115,6 +115,7 @@ export const MultilineInput = forwardRef<
     value,
     onChange,
     onSubmit,
+    onPaste,
     placeholder = '',
     focused = true,
     shouldBlinkCursor,
@@ -134,9 +135,6 @@ export const MultilineInput = forwardRef<
   const [measuredCols, setMeasuredCols] = useState<number | null>(null)
   const [lastActivity, setLastActivity] = useState(Date.now())
 
-  // Refs to track latest values for paste handler (prevents stale closure issues)
-  const valueRef = useRef(value)
-  const cursorPositionRef = useRef(cursorPosition)
   const stickyColumnRef = useRef<number | null>(null)
 
   // Helper to get or set the sticky column for vertical navigation
@@ -146,27 +144,19 @@ export const MultilineInput = forwardRef<
         return stickyColumnRef.current
       }
       const lineIndex = lineStarts.findLastIndex(
-        (lineStart) => lineStart <= cursorPositionRef.current,
+        (lineStart) => lineStart <= cursorPosition,
       )
       // Account for cursorIsChar offset like cursorDown does
       const column =
         lineIndex === -1
           ? 0
-          : cursorPositionRef.current -
-            lineStarts[lineIndex] +
-            (cursorIsChar ? -1 : 0)
+          : cursorPosition - lineStarts[lineIndex] + (cursorIsChar ? -1 : 0)
       stickyColumnRef.current = Math.max(0, column)
       return stickyColumnRef.current
     },
     [],
   )
 
-  // Keep refs in sync with props
-  useEffect(() => {
-    valueRef.current = value
-    cursorPositionRef.current = cursorPosition
-  }, [value, cursorPosition])
-
   // Update last activity on value or cursor changes
   useEffect(() => {
     setLastActivity(Date.now())
@@ -194,35 +184,6 @@ export const MultilineInput = forwardRef<
     [],
   )
 
-  const handlePaste = useCallback(
-    (event: PasteEvent) => {
-      if (!focused) return
-
-      const text = event.text ?? ''
-      if (!text) return
-
-      // Use refs to get the latest values, avoiding stale closure issues
-      // when multiple paste events fire rapidly before React re-renders
-      const currentValue = valueRef.current
-      const currentCursor = cursorPositionRef.current
-
-      const newValue =
-        currentValue.slice(0, currentCursor) + text + currentValue.slice(currentCursor)
-      const newCursor = currentCursor + text.length
-
-      // Update refs immediately so subsequent rapid events see the new state
-      valueRef.current = newValue
-      cursorPositionRef.current = newCursor
-
-      onChange({
-        text: newValue,
-        cursorPosition: newCursor,
-        lastEditDueToNav: false,
-      })
-    },
-    [focused, onChange],
-  )
-
   const cursorRow = lineInfo
     ? Math.max(
         0,
@@ -727,7 +688,10 @@ export const MultilineInput = forwardRef<
           preventKeyDefault(key)
 
           const lineStarts = lineInfo?.lineStarts ?? []
-          const desiredIndex = getOrSetStickyColumn(lineStarts, !shouldHighlight)
+          const desiredIndex = getOrSetStickyColumn(
+            lineStarts,
+            !shouldHighlight,
+          )
 
           onChange({
             text: value,
@@ -746,7 +710,10 @@ export const MultilineInput = forwardRef<
         // Down arrow (no modifiers)
         if (key.name === 'down' && !key.ctrl && !key.meta && !key.option) {
           const lineStarts = lineInfo?.lineStarts ?? []
-          const desiredIndex = getOrSetStickyColumn(lineStarts, !shouldHighlight)
+          const desiredIndex = getOrSetStickyColumn(
+            lineStarts,
+            !shouldHighlight,
+          )
 
           onChange({
             text: value,
@@ -844,7 +811,7 @@ export const MultilineInput = forwardRef<
       stickyScroll={true}
       stickyStart="bottom"
       scrollbarOptions={{ visible: false }}
-      onPaste={handlePaste}
+      onPaste={(event) => onPaste(event.text)}
       style={{
         flexGrow: 0,
         flexShrink: 0,

cli/src/utils/strings.ts

@@ -1,3 +1,6 @@
+import { hasClipboardImage, readClipboardText } from './clipboard-image'
+import type { InputValue } from '../state/chat-store'
+
 export function getSubsequenceIndices(
   str: string,
   sub: string,
@@ -22,4 +25,63 @@ export function getSubsequenceIndices(
   return null
 }
 
-export const BULLET_CHAR = '• '
+export const BULLET_CHAR = '• '
+
+/**
+ * Insert text at cursor position and return the new text and cursor position.
+ */
+function insertTextAtCursor(
+  text: string,
+  cursorPosition: number,
+  textToInsert: string,
+): { newText: string; newCursor: number } {
+  const before = text.slice(0, cursorPosition)
+  const after = text.slice(cursorPosition)
+  return {
+    newText: before + textToInsert + after,
+    newCursor: before.length + textToInsert.length,
+  }
+}
+
+/**
+ * Creates a paste handler for text-only inputs (feedback, ask-user, etc.).
+ * Reads from clipboard with OpenTUI fallback, then inserts at cursor.
+ */
+export function createTextPasteHandler(
+  text: string,
+  cursorPosition: number,
+  onChange: (value: InputValue) => void,
+): (fallbackText?: string) => void {
+  return (fallbackText) => {
+    const pasteText = readClipboardText() ?? fallbackText
+    if (!pasteText) return
+    const { newText, newCursor } = insertTextAtCursor(text, cursorPosition, pasteText)
+    onChange({ text: newText, cursorPosition: newCursor, lastEditDueToNav: false })
+  }
+}
+
+/**
+ * Creates a paste handler that supports both image and text paste.
+ * Checks for image first, falls back to text paste.
+ */
+export function createPasteHandler(options: {
+  text: string
+  cursorPosition: number
+  onChange: (value: InputValue) => void
+  onPasteImage?: () => void
+}): (fallbackText?: string) => void {
+  const { text, cursorPosition, onChange, onPasteImage } = options
+  return (fallbackText) => {
+    // Check for image first if handler provided
+    if (onPasteImage && hasClipboardImage()) {
+      onPasteImage()
+      return
+    }
+    // Handle text paste
+    const pasteText = readClipboardText() ?? fallbackText
+    if (pasteText) {
+      const { newText, newCursor } = insertTextAtCursor(text, cursorPosition, pasteText)
+      onChange({ text: newText, cursorPosition: newCursor, lastEditDueToNav: false })
+    }
+  }
+}