feat(cli): show image errors in pending banner with auto-remove

- Show "file not found" and "unsupported format" errors in the pending images banner instead of message history
- Add isError flag to PendingImage type for proper error detection
- Auto-remove error messages after 3 seconds
- Style error-only banner with red border
- Use pluralize helper for image count

Author: brandonkachen

cli/src/commands/image.ts

@@ -1,6 +1,6 @@
 import { getProjectRoot } from '../project-files'
-import { getSystemMessage } from '../utils/message-history'
 import { validateAndAddImage } from '../utils/add-pending-image'
+import { getSystemMessage } from '../utils/message-history'
 
 import type { PostUserMessageFn } from '../types/contracts/send-message'
 
@@ -30,14 +30,8 @@ export async function handleImageCommand(args: string): Promise<{
   const projectRoot = getProjectRoot()
 
   // Validate and add the image (handles path resolution, format check, and processing)
-  const result = await validateAndAddImage(imagePath, projectRoot)
-  if (!result.success) {
-    const postUserMessage: PostUserMessageFn = (prev) => [
-      ...prev,
-      getSystemMessage(`❌ ${result.error}`),
-    ]
-    return { postUserMessage }
-  }
+  // Errors are shown in the pending images banner with auto-remove
+  await validateAndAddImage(imagePath, projectRoot)
 
   // Use the optional message as the prompt, or empty to just attach the image
   const transformedPrompt = message || ''

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

@@ -1,3 +1,5 @@
+import { pluralize } from '@codebuff/common/util/string'
+
 import { ImageCard } from './image-card'
 import { useTerminalLayout } from '../hooks/use-terminal-layout'
 import { useTheme } from '../hooks/use-theme'
@@ -10,10 +12,41 @@ export const PendingImagesBanner = () => {
   const pendingImages = useChatStore((state) => state.pendingImages)
   const removePendingImage = useChatStore((state) => state.removePendingImage)
 
+  // Separate error messages from actual images
+  const errorImages = pendingImages.filter((img) => img.isError)
+  const validImages = pendingImages.filter((img) => !img.isError)
+
   if (pendingImages.length === 0) {
     return null
   }
 
+  // If we only have errors (no valid images), show just the error messages
+  if (validImages.length === 0 && errorImages.length > 0) {
+    return (
+      <box
+        style={{
+          flexDirection: 'column',
+          marginLeft: width.is('sm') ? 0 : 1,
+          marginRight: width.is('sm') ? 0 : 1,
+          borderStyle: 'single',
+          borderColor: theme.error,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 0,
+          paddingBottom: 0,
+        }}
+        border={['bottom', 'left', 'right']}
+        customBorderChars={BORDER_CHARS}
+      >
+        {errorImages.map((image, index) => (
+          <text key={`${image.path}-${index}`} style={{ fg: theme.error }}>
+            {image.note} ({image.filename})
+          </text>
+        ))}
+      </box>
+    )
+  }
+
   return (
     <box
       style={{
@@ -30,21 +63,27 @@ export const PendingImagesBanner = () => {
       border={['bottom', 'left', 'right']}
       customBorderChars={BORDER_CHARS}
     >
+      {/* Error messages shown above the header */}
+      {errorImages.map((image, index) => (
+        <text key={`error-${image.path}-${index}`} style={{ fg: theme.error }}>
+          {image.note} ({image.filename})
+        </text>
+      ))}
+
       {/* Header */}
       <text style={{ fg: theme.info }}>
-        📎 {pendingImages.length} image{pendingImages.length > 1 ? 's' : ''}{' '}
-        attached
+        📎 {pluralize(validImages.length, 'image')} attached
       </text>
 
-      {/* Image cards in a horizontal row */}
+      {/* Image cards in a horizontal row - only valid images */}
       <box
         style={{
           flexDirection: 'row',
           gap: 1,
           flexWrap: 'wrap',
         }}
       >
-        {pendingImages.map((image, index) => (
+        {validImages.map((image, index) => (
           <ImageCard
             key={`${image.path}-${index}`}
             image={image}

cli/src/state/chat-store.ts

@@ -48,6 +48,7 @@ export type PendingImage = {
   filename: string
   size?: number
   note?: string // Status: "processing…" | "compressed" | error message
+  isError?: boolean // True if this is an error entry (e.g., file not found)
   processedImage?: {
     base64: string
     mediaType: string

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

@@ -78,9 +78,12 @@ export async function addPendingImageFromBase64(
   useChatStore.getState().addPendingImage(pendingImage)
 }
 
+const AUTO_REMOVE_ERROR_DELAY_MS = 3000
+
 /**
  * Add a pending image with an error note (e.g., unsupported format, not found).
  * Used when we want to show the image in the banner with an error state.
+ * Error images are automatically removed after a short delay.
  */
 export function addPendingImageWithError(
   imagePath: string,
@@ -91,7 +94,13 @@ export function addPendingImageWithError(
     path: imagePath,
     filename,
     note,
+    isError: true,
   })
+  
+  // Auto-remove error images after a delay
+  setTimeout(() => {
+    useChatStore.getState().removePendingImage(imagePath)
+  }, AUTO_REMOVE_ERROR_DELAY_MS)
 }
 
 /**
@@ -107,13 +116,14 @@ export async function validateAndAddImage(
 
   // Check if file exists
   if (!existsSync(resolvedPath)) {
-    return { success: false, error: `Image file not found: ${imagePath}` }
+    addPendingImageWithError(imagePath, '❌ file not found')
+    return { success: true }
   }
 
   // Check if it's a supported format
   if (!isImageFile(resolvedPath)) {
     const ext = path.extname(imagePath).toLowerCase()
-    addPendingImageWithError(resolvedPath, `unsupported format ${ext}`)
+    addPendingImageWithError(resolvedPath, `❌ unsupported format ${ext}`)
     return { success: true }
   }