feat(cli): unify image and text attachments into PendingAttachment type

- Create unified PendingAttachment discriminated union with kind: image | text
- Replace separate pendingImages/pendingTextAttachments with single pendingAttachments array
- Add capturePendingAttachments() unified capture function
- Update message queue to use attachments: PendingAttachment[]
- Fix text attachment sending bug where attachments were not sent with messages
- Fix /init edge case where text attachments were dropped during streaming
- Consolidate chat-store methods to have compat APIs delegate to canonical functions
- Remove unused PendingImagesBanner and PendingTextBanner components
- Remove deprecated capturePendingImages and capturePendingTextAttachments functions
- Inline preservePendingAttachments helper in chat.tsx
- Add missing type guard for text attachment filter in PendingAttachmentsBanner
- Rename add-pending-image.ts to pending-attachments.ts
- Create shared AttachmentCard base component for consistent card styling

Author: brandonkachen

cli/src/chat.tsx

@@ -61,8 +61,9 @@ import { usePublishStore } from './state/publish-store'
 import {
   addClipboardPlaceholder,
   addPendingImageFromFile,
+  capturePendingAttachments,
   validateAndAddImage,
-} from './utils/add-pending-image'
+} from './utils/pending-attachments'
 import { createChatScrollAcceleration } from './utils/chat-scroll-accel'
 import { showClipboardMessage } from './utils/clipboard'
 import { readClipboardImage } from './utils/clipboard-image'
@@ -589,7 +590,7 @@ export const Chat = ({
       sendMessageRef.current?.({
         content: message.content,
         agentMode,
-        images: message.images,
+        attachments: message.attachments,
       }) ?? Promise.resolve(),
     isChainInProgressRef,
     activeAgentStreamsRef,
@@ -707,14 +708,18 @@ export const Chat = ({
             return { text, cursorPosition, lastEditDueToNav }
           })()
         : null
-      const preservedPendingImages =
-        preserveInput && useChatStore.getState().pendingImages.length > 0
-          ? [...useChatStore.getState().pendingImages]
-          : null
 
-      if (preserveInput && preservedPendingImages) {
-        useChatStore.getState().clearPendingImages()
-      }
+      // Preserve attachments if needed (inline logic to avoid abstraction overhead)
+      const preservedAttachments = preserveInput
+        ? (() => {
+            const items = useChatStore.getState().pendingAttachments
+            if (items.length > 0) {
+              useChatStore.getState().clearPendingAttachments()
+              return [...items]
+            }
+            return null
+          })()
+        : null
 
       try {
         const result = await routeUserPrompt({
@@ -750,13 +755,11 @@ export const Chat = ({
           })
         }
 
-        if (preserveInput && preservedPendingImages) {
-          const currentPending = useChatStore.getState().pendingImages
-          if (currentPending.length === 0) {
-            useChatStore.setState((state) => {
-              state.pendingImages = preservedPendingImages
-            })
-          }
+        // Restore attachments if they were preserved and none have been added since
+        if (preservedAttachments && useChatStore.getState().pendingAttachments.length === 0) {
+          useChatStore.setState((state) => {
+            state.pendingAttachments = preservedAttachments
+          })
         }
       }
     },

cli/src/commands/command-registry.ts

@@ -12,12 +12,12 @@ import { WEBSITE_URL } from '../login/constants'
 import { useChatStore } from '../state/chat-store'
 import { useFeedbackStore } from '../state/feedback-store'
 import { useLoginStore } from '../state/login-store'
-import { capturePendingImages } from '../utils/add-pending-image'
+import { capturePendingAttachments } from '../utils/pending-attachments'
 import { AGENT_MODES } from '../utils/constants'
 import { getSystemMessage, getUserMessage } from '../utils/message-history'
 
 import type { MultilineInputHandle } from '../components/multiline-input'
-import type { InputValue, PendingImage } from '../state/chat-store'
+import type { InputValue, PendingAttachment } from '../state/chat-store'
 import type { ChatMessage } from '../types/chat'
 import type { SendMessageFn } from '../types/contracts/send-message'
 import type { User } from '../utils/auth'
@@ -33,7 +33,7 @@ export type RouterParams = {
   isStreaming: boolean
   logoutMutation: UseMutationResult<boolean, Error, void, unknown>
   streamMessageIdRef: React.MutableRefObject<string | null>
-  addToQueue: (message: string, images?: PendingImage[]) => void
+  addToQueue: (message: string, attachments?: PendingAttachment[]) => void
   clearMessages: () => void
   saveToHistory: (message: string) => void
   scrollToLatest: () => void
@@ -352,8 +352,8 @@ export const COMMAND_REGISTRY: CommandDefinition[] = [
         params.streamMessageIdRef.current ||
         params.isChainInProgressRef.current
       ) {
-        const pendingImages = capturePendingImages()
-        params.addToQueue(trimmed, pendingImages)
+        const pendingAttachments = capturePendingAttachments()
+        params.addToQueue(trimmed, pendingAttachments)
         params.setInputFocused(true)
         params.inputRef.current?.focus()
         return

cli/src/commands/image.ts

@@ -1,5 +1,5 @@
 import { getProjectRoot } from '../project-files'
-import { validateAndAddImage } from '../utils/add-pending-image'
+import { validateAndAddImage } from '../utils/pending-attachments'
 
 /**
  * Handle the /image command to attach an image file.

cli/src/commands/router.ts

@@ -19,10 +19,10 @@ import { handleClaudeAuthCode } from '../components/claude-connect-banner'
 import { getProjectRoot } from '../project-files'
 import { useChatStore } from '../state/chat-store'
 import {
-  capturePendingImages,
+  capturePendingAttachments,
   hasProcessingImages,
   validateAndAddImage,
-} from '../utils/add-pending-image'
+} from '../utils/pending-attachments'
 import {
   buildBashHistoryMessages,
   createRunTerminalToolResult,
@@ -267,11 +267,16 @@ export async function routeUserPrompt(
 
   const inputMode = useChatStore.getState().inputMode
   const setInputMode = useChatStore.getState().setInputMode
-  const pendingImages = useChatStore.getState().pendingImages
+  const pendingAttachments = useChatStore.getState().pendingAttachments
+  const pendingImages = pendingAttachments.filter((a) => a.kind === 'image')
+  const pendingTextAttachments = pendingAttachments.filter(
+    (a) => a.kind === 'text',
+  )
 
   const trimmed = inputValue.trim()
-  // Allow empty messages if there are pending images attached
-  if (!trimmed && pendingImages.length === 0) return
+  // Allow empty messages if there are pending attachments (images or text)
+  const hasAttachments = pendingAttachments.length > 0
+  if (!trimmed && !hasAttachments) return
 
   // Track user input complete
   // Count @ mentions (simple pattern match - more accurate than nothing)
@@ -282,6 +287,8 @@ export async function routeUserPrompt(
     inputMode,
     hasImages: pendingImages.length > 0,
     imageCount: pendingImages.length,
+    hasTextAttachments: pendingTextAttachments.length > 0,
+    textAttachmentCount: pendingTextAttachments.length,
     isSlashCommand: isSlashCommand(trimmed),
     isBashCommand: trimmed.startsWith('!'),
     hasMentions: mentionMatches.length > 0,
@@ -453,9 +460,9 @@ export async function routeUserPrompt(
     streamMessageIdRef.current ||
     isChainInProgressRef.current
   ) {
-    const pendingImagesForQueue = capturePendingImages()
-    // Pass a copy of pending images to the queue
-    addToQueue(trimmed, pendingImagesForQueue)
+    const pendingAttachmentsForQueue = capturePendingAttachments()
+    // Pass a copy of pending attachments to the queue
+    addToQueue(trimmed, pendingAttachmentsForQueue)
 
     setInputFocused(true)
     inputRef.current?.focus()

cli/src/components/attachment-card.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react'
+
+import { Button } from './button'
+import { useTheme } from '../hooks/use-theme'
+import { IMAGE_CARD_BORDER_CHARS } from '../utils/ui-constants'
+
+import type { ReactNode } from 'react'
+
+export interface AttachmentCardProps {
+  /** Width of the card in characters */
+  width: number
+  /** Content to render inside the bordered card. */
+  children: ReactNode
+  /** Callback when the remove button is clicked. If omitted, the button is hidden. */
+  onRemove?: () => void
+  /** Whether to show the remove button (default: true). Ignored if onRemove is not provided. */
+  showRemoveButton?: boolean
+}
+
+/**
+ * Shared attachment card shell used by image and text attachments.
+ * Renders a bordered card with an optional 'X' remove button to the right.
+ */
+export const AttachmentCard = ({
+  width,
+  children,
+  onRemove,
+  showRemoveButton = true,
+}: AttachmentCardProps) => {
+  const theme = useTheme()
+  const [isCloseHovered, setIsCloseHovered] = useState(false)
+
+  const shouldShowClose = showRemoveButton && !!onRemove
+
+  return (
+    <box style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
+      <box
+        style={{
+          flexDirection: 'column',
+          borderStyle: 'single',
+          borderColor: theme.imageCardBorder,
+          width,
+          padding: 0,
+        }}
+        customBorderChars={IMAGE_CARD_BORDER_CHARS}
+      >
+        {children}
+      </box>
+
+      {shouldShowClose ? (
+        <Button
+          onClick={onRemove}
+          onMouseOver={() => setIsCloseHovered(true)}
+          onMouseOut={() => setIsCloseHovered(false)}
+          style={{ paddingLeft: 0, paddingRight: 0 }}
+        >
+          <text style={{ fg: isCloseHovered ? theme.error : theme.muted }}>X</text>
+        </Button>
+      ) : (
+        // Keep layout aligned when there is no close button
+        <box style={{ width: 1 }} />
+      )}
+    </box>
+  )
+}

cli/src/components/image-card.tsx

@@ -1,15 +1,14 @@
 import fs from 'fs'
 
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
-import { Button } from './button'
+import { AttachmentCard } from './attachment-card'
 import { ImageThumbnail } from './image-thumbnail'
 import { useTheme } from '../hooks/use-theme'
 import {
   supportsInlineImages,
   renderInlineImage,
 } from '../utils/terminal-images'
-import { IMAGE_CARD_BORDER_CHARS } from '../utils/ui-constants'
 
 // Image card display constants
 const MAX_FILENAME_LENGTH = 16
@@ -18,7 +17,6 @@ const THUMBNAIL_WIDTH = 14
 const THUMBNAIL_HEIGHT = 3
 const INLINE_IMAGE_WIDTH = 4
 const INLINE_IMAGE_HEIGHT = 3
-const CLOSE_BUTTON_WIDTH = 1
 
 const truncateFilename = (filename: string): string => {
   if (filename.length <= MAX_FILENAME_LENGTH) {
@@ -34,8 +32,8 @@ const truncateFilename = (filename: string): string => {
 export interface ImageCardImage {
   path: string
   filename: string
-  status?: 'processing' | 'ready' | 'error'  // Defaults to 'ready' if not provided
-  note?: string  // Display note: "compressed" | error message
+  status?: 'processing' | 'ready' | 'error' // Defaults to 'ready' if not provided
+  note?: string // Display note: 'compressed' | error message
 }
 
 interface ImageCardProps {
@@ -50,7 +48,6 @@ export const ImageCard = ({
   showRemoveButton = true,
 }: ImageCardProps) => {
   const theme = useTheme()
-  const [isCloseHovered, setIsCloseHovered] = useState(false)
   const [thumbnailSequence, setThumbnailSequence] = useState<string | null>(
     null,
   )
@@ -92,80 +89,60 @@ export const ImageCard = ({
   const truncatedName = truncateFilename(image.filename)
 
   return (
-    <box style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
-      {/* Main card with border */}
+    <AttachmentCard
+      width={IMAGE_CARD_WIDTH}
+      onRemove={onRemove}
+      showRemoveButton={showRemoveButton}
+    >
+      {/* Thumbnail or icon area */}
       <box
         style={{
-          flexDirection: 'column',
-          borderStyle: 'single',
-          borderColor: theme.imageCardBorder,
-          width: IMAGE_CARD_WIDTH,
-          padding: 0,
+          height: THUMBNAIL_HEIGHT,
+          justifyContent: 'center',
+          alignItems: 'center',
         }}
-        customBorderChars={IMAGE_CARD_BORDER_CHARS}
       >
-        {/* Thumbnail or icon area */}
-        <box
-          style={{
-            height: THUMBNAIL_HEIGHT,
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          {thumbnailSequence ? (
-            <text>{thumbnailSequence}</text>
-          ) : (
-            <ImageThumbnail
-              imagePath={image.path}
-              width={THUMBNAIL_WIDTH}
-              height={THUMBNAIL_HEIGHT}
-              fallback={<text style={{ fg: theme.info }}>🖼️</text>}
-            />
-          )}
-        </box>
+        {thumbnailSequence ? (
+          <text>{thumbnailSequence}</text>
+        ) : (
+          <ImageThumbnail
+            imagePath={image.path}
+            width={THUMBNAIL_WIDTH}
+            height={THUMBNAIL_HEIGHT}
+            fallback={<text style={{ fg: theme.info }}>🖼️</text>}
+          />
+        )}
+      </box>
 
-        {/* Filename - full width */}
-        <box
+      {/* Filename - full width */}
+      <box
+        style={{
+          paddingLeft: 1,
+          paddingRight: 1,
+          flexDirection: 'column',
+        }}
+      >
+        <text
           style={{
-            paddingLeft: 1,
-            paddingRight: 1,
-            flexDirection: 'column',
+            fg: theme.foreground,
+            wrapMode: 'none',
           }}
         >
+          {truncatedName}
+        </text>
+        {((image.status ?? 'ready') === 'processing' || image.note) && (
           <text
             style={{
-              fg: theme.foreground,
+              fg: theme.muted,
               wrapMode: 'none',
             }}
           >
-            {truncatedName}
+            {(image.status ?? 'ready') === 'processing'
+              ? 'processing…'
+              : image.note}
           </text>
-          {((image.status ?? 'ready') === 'processing' || image.note) && (
-            <text
-              style={{
-                fg: theme.muted,
-                wrapMode: 'none',
-              }}
-            >
-              {(image.status ?? 'ready') === 'processing' ? 'processing…' : image.note}
-            </text>
-          )}
-        </box>
+        )}
       </box>
-
-      {/* Close button outside the card */}
-      {showRemoveButton && onRemove ? (
-        <Button
-          onClick={onRemove}
-          onMouseOver={() => setIsCloseHovered(true)}
-          onMouseOut={() => setIsCloseHovered(false)}
-          style={{ paddingLeft: 0, paddingRight: 0 }}
-        >
-          <text style={{ fg: isCloseHovered ? theme.error : theme.muted }}>X</text>
-        </Button>
-      ) : (
-        <box style={{ width: CLOSE_BUTTON_WIDTH }} />
-      )}
-    </box>
+    </AttachmentCard>
   )
 }