# Ticket 4.10 — Image & Paste Preview

**Phase**: 4 — Frontend UI
**Priority**: Medium
**Depends on**: 4.1

## Description

Preview bar for images pasted into the input and a modal for large text pastes. Gives the user visual feedback before sending content to the agent.

## Acceptance Criteria

### AC1: Image paste shows thumbnail preview bar

```gherkin
Given the input field is focused
When the user pastes an image from clipboard
Then a preview bar appears above the input
And it shows a thumbnail of the pasted image
And each image has a remove (✕) button
And multiple images can be pasted
```

### AC2: Image drag-and-drop

```gherkin
Given the chat UI is visible
When the user drags an image file over the UI
Then a drop zone indicator appears
And dropping the image adds it to the preview bar
```

### AC3: Large text paste modal

```gherkin
Given the input field is focused
When the user pastes text longer than 500 characters
Then a modal appears showing the full pasted text
And the modal has "Attach as context" and "Cancel" buttons
And "Attach as context" adds the text as an attachment
And "Cancel" discards the paste
```

### AC4: Image removal

```gherkin
Given 3 images are in the preview bar
When the user clicks the ✕ button on the second image
Then only the second image is removed
And the other 2 remain
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| Large text detection | Unit | Detects paste content > 500 chars |
| Image paste | E2E | Pasting image from clipboard shows thumbnail in preview bar |
| Drag-and-drop | E2E | Dragging image shows drop zone, dropping adds to preview |
| Paste modal | E2E | Large text paste shows modal with attach/cancel options |
| Image removal | E2E | Clicking remove on a preview removes that image, others persist |
| Multiple images | E2E | All pasted images shown in preview bar, all included in sent message |

## Reference

- Claude-relay image preview: `../claude-relay/lib/public/app.js` (image handling)
- Claude-relay paste modal: `../claude-relay/lib/public/app.js` (lines 205-216)
