Fix image attachment race condition and path issues [codecane]

- Add status checks in image-card.tsx and image-thumbnail.tsx to skip file reads when status is not ready
- Fix path inconsistency in pending-attachments.ts (use resolvedPath in error handling)
- Prevents production failures caused by reading files during processing window or with invalid paths

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>

Author: brandonkachen

cli/src/components/image-card.tsx

@@ -34,6 +34,10 @@ export interface ImageCardImage {
   filename: string
   status?: 'processing' | 'ready' | 'error' // Defaults to 'ready' if not provided
   note?: string // Display note: 'compressed' | error message
+  processedImage?: {
+    base64: string
+    mediaType: string
+  }
 }
 
 interface ImageCardProps {
@@ -56,20 +60,35 @@ export const ImageCard = ({
   // Load thumbnail if terminal supports inline images (iTerm2/Kitty)
   useEffect(() => {
     if (!canShowInlineImages) return
+    // Skip loading while image is processing or has error to avoid race condition and unnecessary failed reads
+    if ((image.status ?? 'ready') !== 'ready') return
 
     let cancelled = false
 
     const loadThumbnail = async () => {
       try {
-        const imageData = fs.readFileSync(image.path)
-        const base64Data = imageData.toString('base64')
-        const sequence = renderInlineImage(base64Data, {
-          width: INLINE_IMAGE_WIDTH,
-          height: INLINE_IMAGE_HEIGHT,
-          filename: image.filename,
-        })
-        if (!cancelled) {
-          setThumbnailSequence(sequence)
+        let base64Data: string | undefined
+
+        if (image.processedImage) {
+          base64Data = image.processedImage.base64
+        } else if (!image.path.startsWith('clipboard:')) {
+          const imageData = fs.readFileSync(image.path)
+          base64Data = imageData.toString('base64')
+        }
+
+        if (base64Data) {
+          const sequence = renderInlineImage(base64Data, {
+            width: INLINE_IMAGE_WIDTH,
+            height: INLINE_IMAGE_HEIGHT,
+            filename: image.filename,
+          })
+          if (!cancelled) {
+            setThumbnailSequence(sequence)
+          }
+        } else {
+          if (!cancelled) {
+            setThumbnailSequence(null)
+          }
         }
       } catch {
         // Failed to load image, will show icon fallback
@@ -84,7 +103,7 @@ export const ImageCard = ({
     return () => {
       cancelled = true
     }
-  }, [image.path, image.filename, canShowInlineImages])
+  }, [image, image.filename, canShowInlineImages])
 
   const truncatedName = truncateFilename(image.filename)
 
@@ -106,7 +125,7 @@ export const ImageCard = ({
           <text>{thumbnailSequence}</text>
         ) : (
           <ImageThumbnail
-            imagePath={image.path}
+            image={image}
             width={THUMBNAIL_WIDTH}
             height={THUMBNAIL_HEIGHT}
             fallback={<text style={{ fg: theme.info }}>🖼️</text>}

cli/src/components/image-thumbnail.tsx

@@ -5,6 +5,7 @@
  */
 
 import React, { useEffect, useState, memo } from 'react'
+import { type ImageCardImage } from './image-card'
 
 import {
   extractThumbnailColors,
@@ -13,7 +14,7 @@ import {
 } from '../utils/image-thumbnail'
 
 interface ImageThumbnailProps {
-  imagePath: string
+  image: ImageCardImage
   width: number // Width in cells
   height: number // Height in rows (each row uses half-blocks for 2 pixel rows)
   fallback?: React.ReactNode
@@ -27,18 +28,32 @@ interface ImageThumbnailProps {
  * - ▀ (upper half block) character
  */
 export const ImageThumbnail = memo(({
-  imagePath,
+  image,
   width,
   height,
   fallback,
 }: ImageThumbnailProps) => {
   const [thumbnailData, setThumbnailData] = useState<ThumbnailData | null>(null)
 
   useEffect(() => {
+    // Skip loading while image is processing or has error to avoid race condition and unnecessary failed reads
+    if ((image.status ?? 'ready') !== 'ready') return
+
     let cancelled = false
 
     const loadThumbnail = async () => {
-      const data = await extractThumbnailColors(imagePath, width, height)
+      let data: ThumbnailData | null = null
+      try {
+        if (image.processedImage) {
+          const imageBuffer = Buffer.from(image.processedImage.base64, 'base64')
+          data = await extractThumbnailColors(imageBuffer, width, height)
+        } else if (!image.path.startsWith('clipboard:')) {
+          data = await extractThumbnailColors(image.path, width, height)
+        }
+      } catch {
+        // Ignore errors, will show fallback
+      }
+
       if (!cancelled) {
         setThumbnailData(data)
       }
@@ -49,7 +64,7 @@ export const ImageThumbnail = memo(({
     return () => {
       cancelled = true
     }
-  }, [imagePath, width, height])
+  }, [image, width, height])
 
   if (!thumbnailData) {
     return <>{fallback}</>

cli/src/utils/image-thumbnail.ts

@@ -27,12 +27,12 @@ export interface ThumbnailData {
  * @returns Promise resolving to thumbnail data with pixel colors
  */
 export async function extractThumbnailColors(
-  imagePath: string,
+  source: string | Buffer,
   targetWidth: number,
   targetHeight: number,
 ): Promise<ThumbnailData | null> {
   try {
-    const image = await Jimp.read(imagePath)
+    const image = await Jimp.read(source)
 
     // Resize to target dimensions (height * 2 because we use half-blocks)
     // Use bilinear interpolation for smoother downscaling (sharper than nearest-neighbor)
@@ -61,7 +61,7 @@ export async function extractThumbnailColors(
   } catch (error) {
     logger.warn(
       {
-        imagePath,
+        source: typeof source === 'string' ? source : `Buffer(len=${source.length})`,
         error: error instanceof Error ? error.message : String(error),
       },
       'Failed to extract thumbnail colors from image',

cli/src/utils/pending-attachments.ts

@@ -170,7 +170,7 @@ export async function validateAndAddImage(
   // Check if file exists
   if (!existsSync(resolvedPath)) {
     const error = 'file not found'
-    addPendingImageWithError(imagePath, `❌ ${error}`)
+    addPendingImageWithError(resolvedPath, `❌ ${error}`)
     return { success: false, error }
   }