fix(ux): have user message display a short path for pasted images (#17613)

packages/cli/src/ui/components/messages/UserMessage.test.tsx

@@ -44,4 +44,16 @@ describe('UserMessage', () => {
 
     expect(output).toMatchSnapshot();
   });
+
+  it('transforms image paths in user message', () => {
+    const message = 'Check out this image: @/path/to/my-image.png';
+    const { lastFrame } = renderWithProviders(
+      <UserMessage text={message} width={80} />,
+      { width: 80 },
+    );
+    const output = lastFrame();
+
+    expect(output).toContain('[Image my-image.png]');
+    expect(output).toMatchSnapshot();
+  });
 });