feat: Attach files

Author: jahooma

cli/src/chat.tsx

@@ -66,6 +66,7 @@ import { loadLocalAgents } from './utils/local-agent-registry'
 import { logger } from './utils/logger'
 import {
   addClipboardPlaceholder,
+  addPendingFileFromPath,
   addPendingImageFromFile,
   validateAndAddImage,
 } from './utils/pending-attachments'
@@ -1133,6 +1134,9 @@ export const Chat = ({
           showClipboardMessage('Failed to add image', { durationMs: 3000 })
         })
       },
+      onPasteFilePath: (filePath: string, isDirectory: boolean) => {
+        addPendingFileFromPath(filePath, isDirectory)
+      },
       onPasteText: (text: string) => {
         setInputValue((prev) => {
           const before = prev.text.slice(0, prev.cursorPosition)
@@ -1494,6 +1498,7 @@ export const Chat = ({
               onChange: setInputValue,
               onPasteImage: chatKeyboardHandlers.onPasteImage,
               onPasteImagePath: chatKeyboardHandlers.onPasteImagePath,
+              onPasteFilePath: chatKeyboardHandlers.onPasteFilePath,
               onPasteLongText: (pastedText) => {
                 const id = crypto.randomUUID()
                 const preview = pastedText.slice(0, 100).replace(/\n/g, ' ')

cli/src/commands/router.ts

@@ -32,6 +32,7 @@ import { getSystemProcessEnv } from '../utils/env'
 import { getSystemMessage, getUserMessage } from '../utils/message-history'
 import {
   capturePendingAttachments,
+  hasProcessingFiles,
   hasProcessingImages,
   validateAndAddImage,
 } from '../utils/pending-attachments'
@@ -522,9 +523,9 @@ export async function routeUserPrompt(
 
   // Regular message or unknown slash command - send to agent
 
-  // Block sending if images are still processing
-  if (hasProcessingImages()) {
-    showClipboardMessage('processing images...', {
+  // Block sending if attachments are still processing
+  if (hasProcessingImages() || hasProcessingFiles()) {
+    showClipboardMessage('processing attachments...', {
       durationMs: 2000,
     })
     return

cli/src/components/file-attachment-card.tsx

@@ -0,0 +1,98 @@
+import { AttachmentCard } from './attachment-card'
+import { useTheme } from '../hooks/use-theme'
+
+import type { FileAttachment } from '../types/chat'
+import type { PendingFileAttachment } from '../types/store'
+
+const FILE_CARD_WIDTH = 20
+const MAX_FILENAME_LENGTH = 16
+
+const FILE_ICON_LINES = [
+  '   ┌───╮',
+  '   │ ≡ │',
+  '   └───╯',
+]
+
+const FOLDER_ICON_LINES = [
+  '  ╭──╮   ',
+  '  │  ╰──╮',
+  '  ╰─────╯',
+]
+
+const truncateFilename = (filename: string): string => {
+  if (filename.length <= MAX_FILENAME_LENGTH) return filename
+  // Find extension — ignore leading dot (dotfiles like .gitignore)
+  const lastDot = filename.lastIndexOf('.')
+  const hasExtension = lastDot > 0
+  const ext = hasExtension ? filename.slice(lastDot) : ''
+  const baseName = hasExtension ? filename.slice(0, lastDot) : filename
+  const maxBaseLength = MAX_FILENAME_LENGTH - ext.length - 1 // -1 for ellipsis
+  if (maxBaseLength <= 0) return filename.slice(0, MAX_FILENAME_LENGTH - 1) + '…'
+  return baseName.slice(0, maxBaseLength) + '…' + ext
+}
+
+interface FileAttachmentCardProps {
+  attachment: PendingFileAttachment | FileAttachment
+  onRemove?: () => void
+  showRemoveButton?: boolean
+}
+
+export const FileAttachmentCard = ({
+  attachment,
+  onRemove,
+  showRemoveButton = true,
+}: FileAttachmentCardProps) => {
+  const theme = useTheme()
+  const iconLines = attachment.isDirectory ? FOLDER_ICON_LINES : FILE_ICON_LINES
+  const truncatedName = truncateFilename(attachment.filename)
+  const status = 'status' in attachment ? attachment.status : undefined
+
+  return (
+    <AttachmentCard
+      width={FILE_CARD_WIDTH}
+      onRemove={onRemove}
+      showRemoveButton={showRemoveButton}
+    >
+      {/* ASCII art icon area */}
+      <box
+        style={{
+          height: 3,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <text style={{ fg: theme.info }}>
+          {iconLines.join('\n')}
+        </text>
+      </box>
+
+      {/* Filename and note */}
+      <box
+        style={{
+          paddingLeft: 1,
+          paddingRight: 1,
+          flexDirection: 'column',
+        }}
+      >
+        <text
+          style={{
+            fg: theme.foreground,
+            wrapMode: 'none',
+          }}
+        >
+          {truncatedName}
+        </text>
+        {(status === 'processing' || attachment.note) && (
+          <text
+            style={{
+              fg: status === 'error' ? theme.error : theme.muted,
+              wrapMode: 'none',
+            }}
+          >
+            {status === 'processing' ? 'reading…' : attachment.note}
+          </text>
+        )}
+      </box>
+    </AttachmentCard>
+  )
+}

cli/src/components/message-block.tsx

@@ -4,6 +4,7 @@ import { memo, useState } from 'react'
 import { BlocksRenderer } from './blocks/blocks-renderer'
 import { UserContentWithCopyButton } from './blocks/user-content-copy'
 import { Button } from './button'
+import { FileAttachmentCard } from './file-attachment-card'
 import { ImageCard } from './image-card'
 import { MessageFooter } from './message-footer'
 import { TextAttachmentCard } from './text-attachment-card'
@@ -19,6 +20,7 @@ import type { FeedbackCategory } from '@codebuff/common/constants/feedback'
 
 import type {
   ContentBlock,
+  FileAttachment,
   ImageAttachment,
   TextAttachment,
   ChatMessageMetadata,
@@ -58,18 +60,21 @@ interface MessageBlockProps {
   }) => void
   attachments?: ImageAttachment[]
   textAttachments?: TextAttachment[]
+  fileAttachments?: FileAttachment[]
   metadata?: ChatMessageMetadata
   isLastMessage?: boolean
 }
 
 const MessageAttachments = memo(({
   imageAttachments,
   textAttachments,
+  fileAttachments,
 }: {
   imageAttachments: ImageAttachment[]
   textAttachments: TextAttachment[]
+  fileAttachments: FileAttachment[]
 }) => {
-  if (imageAttachments.length === 0 && textAttachments.length === 0) {
+  if (imageAttachments.length === 0 && textAttachments.length === 0 && fileAttachments.length === 0) {
     return null
   }
 
@@ -95,6 +100,13 @@ const MessageAttachments = memo(({
           showRemoveButton={false}
         />
       ))}
+      {fileAttachments.map((attachment) => (
+        <FileAttachmentCard
+          key={attachment.path}
+          attachment={attachment}
+          showRemoveButton={false}
+        />
+      ))}
     </box>
   )
 })
@@ -127,6 +139,7 @@ export const MessageBlock = memo(({
   onOpenFeedback,
   attachments,
   textAttachments,
+  fileAttachments,
   metadata,
   isLastMessage,
 }: MessageBlockProps) => {
@@ -301,10 +314,12 @@ export const MessageBlock = memo(({
         {/* Show attachments for user messages */}
         {isUser &&
           ((attachments && attachments.length > 0) ||
-            (textAttachments && textAttachments.length > 0)) && (
+            (textAttachments && textAttachments.length > 0) ||
+            (fileAttachments && fileAttachments.length > 0)) && (
             <MessageAttachments
               imageAttachments={attachments ?? []}
               textAttachments={textAttachments ?? []}
+              fileAttachments={fileAttachments ?? []}
             />
           )}
       </box>

cli/src/components/message-with-agents.tsx

@@ -268,6 +268,7 @@ export const MessageWithAgents = memo(
                   onOpenFeedback={onOpenFeedback}
                   attachments={message.attachments}
                   textAttachments={message.textAttachments}
+                  fileAttachments={message.fileAttachments}
                   metadata={message.metadata}
                   isLastMessage={isLastMessage}
                 />
@@ -303,6 +304,7 @@ export const MessageWithAgents = memo(
                 onOpenFeedback={onOpenFeedback}
                 attachments={message.attachments}
                 textAttachments={message.textAttachments}
+                fileAttachments={message.fileAttachments}
                 metadata={message.metadata}
                 isLastMessage={isLastMessage}
               />

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

@@ -1,10 +1,15 @@
 import { BottomBanner } from './bottom-banner'
+import { FileAttachmentCard } from './file-attachment-card'
 import { ImageCard } from './image-card'
 import { TextAttachmentCard } from './text-attachment-card'
 import { useTheme } from '../hooks/use-theme'
 import { useChatStore } from '../state/chat-store'
 
-import type { PendingImageAttachment, PendingTextAttachment } from '../types/store'
+import type {
+  PendingFileAttachment,
+  PendingImageAttachment,
+  PendingTextAttachment,
+} from '../types/store'
 
 /**
  * Combined banner for both image and text attachments.
@@ -24,6 +29,9 @@ export const PendingAttachmentsBanner = () => {
   const pendingTextAttachments = pendingAttachments.filter(
     (a): a is PendingTextAttachment => a.kind === 'text',
   )
+  const pendingFileAttachments = pendingAttachments.filter(
+    (a): a is PendingFileAttachment => a.kind === 'file',
+  )
 
   // Separate error messages from actual images
   const errorImages: PendingImageAttachment[] = []
@@ -38,10 +46,11 @@ export const PendingAttachmentsBanner = () => {
 
   const hasValidImages = validImages.length > 0
   const hasTextAttachments = pendingTextAttachments.length > 0
-  const hasErrorsOnly = errorImages.length > 0 && !hasValidImages && !hasTextAttachments
+  const hasFileAttachments = pendingFileAttachments.length > 0
+  const hasErrorsOnly = errorImages.length > 0 && !hasValidImages && !hasTextAttachments && !hasFileAttachments
 
   // Nothing to show
-  if (!hasValidImages && !hasTextAttachments && errorImages.length === 0) {
+  if (!hasValidImages && !hasTextAttachments && !hasFileAttachments && errorImages.length === 0) {
     return null
   }
 
@@ -92,6 +101,15 @@ export const PendingAttachmentsBanner = () => {
             onRemove={() => removePendingAttachment(attachment.id)}
           />
         ))}
+
+        {/* File/folder attachment cards */}
+        {pendingFileAttachments.map((attachment) => (
+          <FileAttachmentCard
+            key={attachment.id}
+            attachment={attachment}
+            onRemove={() => removePendingAttachment(attachment.path)}
+          />
+        ))}
       </box>
     </BottomBanner>
   )

cli/src/hooks/helpers/send-message.ts

@@ -26,6 +26,7 @@ import { usageQueryKeys } from '../use-usage-query'
 
 import type {
   PendingAttachment,
+  PendingFileAttachment,
   PendingImageAttachment,
   PendingTextAttachment,
 } from '../../types/store'
@@ -144,6 +145,10 @@ export const prepareUserMessage = async (params: {
     (a): a is PendingTextAttachment => a.kind === 'text',
   )
 
+  const pendingFileAttachments = allAttachments.filter(
+    (a): a is PendingFileAttachment => a.kind === 'file',
+  )
+
   // Append text attachments to the content
   let finalContent = content
   if (pendingTextAttachments.length > 0) {
@@ -155,6 +160,23 @@ export const prepareUserMessage = async (params: {
       : textAttachmentContent
   }
 
+  // Append file/folder attachments to the content
+  if (pendingFileAttachments.length > 0) {
+    const fileAttachmentContent = pendingFileAttachments
+      .filter((att) => att.status === 'ready')
+      .map((att) =>
+        att.isDirectory
+          ? `[Directory: ${att.path}]\n${att.content}`
+          : `[File: ${att.path}]\n${att.content}`,
+      )
+      .join('\n\n')
+    if (fileAttachmentContent) {
+      finalContent = finalContent
+        ? `${finalContent}\n\n${fileAttachmentContent}`
+        : fileAttachmentContent
+    }
+  }
+
   const { attachments: imageAttachments, messageContent } = await processImagesForMessage({
     content: finalContent,
     pendingImages,
@@ -172,8 +194,18 @@ export const prepareUserMessage = async (params: {
     charCount: att.charCount,
   }))
 
+  // Convert pending file attachments to stored file attachments for display
+  const fileAttachmentsForMessage = pendingFileAttachments
+    .filter((att) => att.status === 'ready')
+    .map((att) => ({
+      path: att.path,
+      filename: att.filename,
+      isDirectory: att.isDirectory,
+      note: att.note,
+    }))
+
   // Pass original content (not finalContent) for display, but finalContent goes to agent
-  const userMessage = getUserMessage(content, imageAttachments, textAttachmentsForMessage)
+  const userMessage = getUserMessage(content, imageAttachments, textAttachmentsForMessage, fileAttachmentsForMessage)
   const userMessageId = userMessage.id
   if (imageAttachments.length > 0) {
     userMessage.attachments = imageAttachments