Skip to content

feat(terminal): support multiple image attachments (up to 5) with drag-and-drop#72

Merged
jom-sq merged 2 commits intomainfrom
jom/feature-multi-image-attachments
Mar 4, 2026
Merged

feat(terminal): support multiple image attachments (up to 5) with drag-and-drop#72
jom-sq merged 2 commits intomainfrom
jom/feature-multi-image-attachments

Conversation

@jom-sq
Copy link
Copy Markdown
Collaborator

@jom-sq jom-sq commented Mar 4, 2026

Summary

Adds support for attaching multiple images (up to 5) to a message, with both paste and drag-and-drop support.

Changes

  • Multiple images: pendingImage (singular) → pendingImages (array, max 5) across the full stack
  • Drag-and-drop: Added drag event handlers on the input area with a dashed magenta outline indicator
  • Paste: Collects all image items from clipboard, not just the first
  • UI: Flex-wrap grid of thumbnails with circular ×-to-remove badges; multi-image chat layout; "Maximum 5 images" label at capacity
  • Server: Saves images with indexed filenames (timestamp-0.png, timestamp-1.png), composes multi-image prompt for amp CLI
  • History: Reconstructs multiple images from thread history on reload

Files changed (11)

Layer Files
Shared types shared/websocket.ts, src/utils/parseMarkdown.ts, src/components/terminal/types.ts
State src/components/terminal/useTerminalState.ts
Input src/components/terminal/TerminalInput.tsx
Terminal src/components/terminal/Terminal.tsx
WebSocket src/components/terminal/useTerminalWebSocket.ts, server/websocket.ts
Display src/components/terminal/TerminalMessages.tsx, src/components/terminal/useTerminalMessages.ts
Styles src/styles/terminal.css

Testing

  • pnpm check passes (format, lint, typecheck, build)
  • All 261 tests pass

jom-sq and others added 2 commits March 4, 2026 09:11
…g-and-drop

- Change pendingImage (singular) to pendingImages (array, max 5)
- Add drag-and-drop support on the input area
- Handle multiple images in paste (clipboard) events
- Save multiple images as artifacts with indexed filenames
- Render multiple image thumbnails in chat messages
- Reconstruct multiple images from thread history
- Add drag-over visual indicator styling

Co-authored-by: Amp <amp@ampcode.com>
- Extract readFileAsBase64 helper to eliminate 3x duplicated FileReader logic
- Fix dragLeave flicker using enter/leave counter pattern (classic gotcha)
- Add file size validation (MAX_IMAGE_SIZE_BYTES = 10MB)
- Extract MAX_ATTACHED_IMAGES constant to shared/constants.ts
- Fix lint error with proper Error rejection in FileReader promise

Co-authored-by: Amp <amp@ampcode.com>
@jom-sq jom-sq marked this pull request as ready for review March 4, 2026 14:19
@jom-sq jom-sq merged commit 69d415a into main Mar 4, 2026
4 checks passed
@jom-sq jom-sq deleted the jom/feature-multi-image-attachments branch March 4, 2026 14:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant