fix: optimistically show image banner

Author: brandonkachen

cli/src/chat.tsx

@@ -1015,15 +1015,40 @@ export const Chat = ({
       onBashHistoryUp: navigateUp,
       onBashHistoryDown: navigateDown,
       onPasteImage: () => {
-        // Show placeholder immediately so user sees the banner right away
+        // Show placeholder immediately for instant feedback
         const placeholderPath = addClipboardPlaceholder()
 
-        // Check and process clipboard image in background
+        // Check and process clipboard in background
         setTimeout(() => {
-          // Check if clipboard actually has an image
           if (!hasClipboardImage()) {
-            // No image - quietly remove placeholder (brief flash is acceptable)
+            // No image - remove placeholder and simulate text paste
             useChatStore.getState().removePendingImage(placeholderPath)
+
+            // Read text from clipboard and insert it
+            try {
+              const { spawnSync } = require('child_process')
+              const textResult = spawnSync(
+                process.platform === 'darwin' ? 'pbpaste' :
+                process.platform === 'win32' ? 'powershell' : 'xclip',
+                process.platform === 'win32' ? ['-Command', 'Get-Clipboard'] :
+                process.platform === 'linux' ? ['-selection', 'clipboard', '-o'] : [],
+                { encoding: 'utf-8', timeout: 1000 }
+              )
+              if (textResult.status === 0 && textResult.stdout) {
+                const text = textResult.stdout
+                setInputValue((prev) => {
+                  const before = prev.text.slice(0, prev.cursorPosition)
+                  const after = prev.text.slice(prev.cursorPosition)
+                  return {
+                    text: before + text + after,
+                    cursorPosition: before.length + text.length,
+                    lastEditDueToNav: false,
+                  }
+                })
+              }
+            } catch {
+              // Ignore errors - text paste just won't work
+            }
             return
           }
 
@@ -1040,7 +1065,7 @@ export const Chat = ({
           void addPendingImageFromFile(result.imagePath, cwd, placeholderPath)
         }, 0)
 
-        return true
+        return true // Always consume - we handle text paste ourselves if needed
       },
     }),
     [

cli/src/commands/router.ts

@@ -16,7 +16,7 @@ import {
 import { getProjectRoot } from '../project-files'
 import { useChatStore } from '../state/chat-store'
 import { getSystemMessage, getUserMessage } from '../utils/message-history'
-import { capturePendingImages, validateAndAddImage } from '../utils/add-pending-image'
+import { capturePendingImages, hasProcessingImages, validateAndAddImage } from '../utils/add-pending-image'
 import {
   buildBashHistoryMessages,
   createRunTerminalToolResult,
@@ -355,6 +355,13 @@ export async function routeUserPrompt(
   }
 
   // Regular message or unknown slash command - send to agent
+  
+  // Block sending if images are still processing
+  if (hasProcessingImages()) {
+    // Don't send - images are still processing
+    return
+  }
+
   saveToHistory(trimmed)
   setInputValue({ text: '', cursorPosition: 0, lastEditDueToNav: false })
 

cli/src/components/pending-images-banner.tsx

@@ -88,6 +88,7 @@ export const PendingImagesBanner = () => {
         {readyCount > 0 && `${pluralize(readyCount, 'image')} attached`}
         {readyCount > 0 && processingCount > 0 && ', '}
         {processingCount > 0 && `${pluralize(processingCount, 'image')} processing`}
+        {processingCount > 0 && ' (wait to send)'}
       </text>
 
       {/* Image cards in a horizontal row - only valid images */}

cli/src/utils/add-pending-image.ts

@@ -168,6 +168,15 @@ export async function validateAndAddImage(
   return { success: true }
 }
 
+/**
+ * Check if any pending images are still processing.
+ */
+export function hasProcessingImages(): boolean {
+  return useChatStore.getState().pendingImages.some(
+    (img) => img.status === 'processing',
+  )
+}
+
 /**
  * Capture and clear pending images so they can be passed to the queue without
  * duplicating state handling logic in multiple callers.

cli/src/utils/clipboard-image.ts

@@ -31,14 +31,14 @@ function generateImageFilename(): string {
 
 /**
  * Check if clipboard contains an image (macOS)
+ * Uses 'clipboard info' which is the fastest way to check clipboard types
  */
 function hasImageMacOS(): boolean {
   try {
-    // Use osascript to check clipboard type
     const result = spawnSync('osascript', [
       '-e',
       'clipboard info',
-    ], { encoding: 'utf-8', timeout: 5000 })
+    ], { encoding: 'utf-8', timeout: 1000 })
 
     if (result.status !== 0) {
       return false