Add conversation image replacement

tests/dashboard/conversations.test.tsx

@@ -468,6 +468,53 @@ describe('ConversationsPage', () => {
     expect(screen.getByText('Share a saved image')).toHaveFocus();
   });
 
+  it('creates a blurred green-screen preview from a saved source and conversation target', async () => {
+    installConversationList();
+    const asset = {
+      id: '11111111-1111-4111-8111-111111111111', tags: ['selfie'], safety: 'sfw',
+      classificationStatus: 'ready', description: 'green phone', confidence: 1,
+      fileName: 'green-phone.jpg', mimeType: 'image/jpeg', sizeBytes: 1024, width: 800, height: 1000,
+      enabled: true, consentConfirmedAt: 1, createdAt: 1, updatedAt: 1,
+      sendCount: 0, lastSentAt: null, urlPath: '/library-media/green-phone.jpg',
+    };
+    server.use(
+      http.get('/api/conversations/room-alice/image-replacement-options', () => HttpResponse.json({
+        sources: [asset],
+        targets: [
+          { id: 'original-post', label: 'Original post image', urlPath: 'https://i.redd.it/source-post.jpg' },
+          { id: 'message-1-0', label: "u/alice's conversation image 2", urlPath: '/media/alice/image.jpg' },
+        ],
+        reason: null,
+      })),
+      http.post('/api/conversations/room-alice/generate-image-replacement', async ({ request }) => {
+        expect(await request.json()).toEqual({ sourceAssetId: asset.id, targetId: 'original-post' });
+        return HttpResponse.json({
+          imageDataUrl: 'data:image/jpeg;base64,Z2VuZXJhdGVk', mimeType: 'image/jpeg',
+          fileName: 'replacement-alice.jpg', width: 800, height: 1000,
+        });
+      }),
+    );
+    const user = userEvent.setup();
+    renderConversations();
+
+    await user.click(await screen.findByRole('button', { name: /u\/alice/ }));
+    await user.click(await screen.findByText('Create a green-screen image'));
+    expect(await screen.findByRole('img', { name: 'Green-screen source green-phone.jpg' })).toHaveClass('is-blurred');
+    await user.click(screen.getByRole('button', { name: 'Reveal source images' }));
+    await user.click(screen.getByRole('radio', { name: /green-phone\.jpg/ }));
+    await user.click(screen.getByRole('button', { name: 'Reveal conversation choices' }));
+    await user.click(screen.getByRole('radio', { name: 'Original post image' }));
+    await user.click(screen.getByRole('button', { name: 'Create image' }));
+
+    const generated = await screen.findByRole('img', { name: 'Generated green-screen replacement' });
+    expect(generated).toHaveClass('is-blurred');
+    await user.click(screen.getByRole('button', { name: 'Reveal generated image' }));
+    expect(generated).not.toHaveClass('is-blurred');
+    expect(screen.getByRole('link', { name: 'Download generated image' })).toHaveAttribute(
+      'download', 'replacement-alice.jpg',
+    );
+  });
+
   it('shows unused turns separately from a safety handoff', async () => {
     server.use(
       http.get('/api/conversations', () => HttpResponse.json([alice])),