Make dropped image filenames visible in chat to enable prompt review on UI bug reproduction #5013
Description
What feature would you like to see?
Summary
Drag-and-drop for images speeds up UI debugging workflows, but the chat currently shows only generic labels (e.g., [image 740x1416 PNG]) instead of the actual filenames. This makes it hard to verify order, deduplicate, or confirm that the right assets were referenced—especially for multi-image, sequence-based prompts.
Background
Enabling drag and drop for image files greatly enhanced workflows dealing with UI. It is often much faster than pointing the model to specific image files which requires back and forth copy pasting, for example:
“Look at project/quality_assurance/submenus_overlap_on_mouseover.png and submenus_overlap_on_click_action.png, then…”.
However, the information currently displayed in the chat (ex: [image 740x1416 PNG]) instead of the file name is not very helpful. This is particularly problematic when fixing tricky UI issues, as these can require detailed prompts with multiple image references demonstrating complex sequences to the model so that it gets sufficient context to analyze a problem.
Example: What we see today (filenames hidden)
“Here is the sequence when a card is brought to the forefront:
<1> The top card begins flying off the screen: [image 740x1416 PNG]
<2> The second card starts growing in size to take the primary slot: [image 740x1416 PNG]
<3> The first card is now fully outside the viewport (expected terminal state): [image 740x1416 PNG]
<4> Bug: the first card briefly reappears centered over the stack, obscuring the new top card: [image 740x1416 PNG]
<5> During this blip, the z-index and scale revert for ~150–300ms, creating a flicker that hides the second card: [image 740x1416 PNG]
<6> The ghosted top card disappears again, but the backdrop/card depths remain wrong for a frame (notice the third card’s scale): [image 740x1416 PNG]
<7> Everything finally settles and the second card is primary, but the transition looks janky due to the reappearance: [image 740x1416 PNG]”
User Experience
Because the chat only shows generic labels like “[image 740x1416 PNG]”, it’s extremely hard to review this prompt after writing it: I can’t verify that 04_bug_reappears_center.png was actually the one dropped at step <4> (and not, say, 06_stack_depth_incorrect.png). When crafting multi-image prompts for tricky UI bugs like this, a single mis-ordered or wrong image can send the model in the wrong direction, yet there’s no way in chat to confirm filenames.
Proposal
Display each dropped image as: [ — ] (e.g., [04_bug_reappears_center.png — 740×1416 PNG]).
Example: How it should look (filenames visible in chat)
“Here is the sequence when a card is brought to the forefront:
<1> The top card begins flying off the screen: [01_topcard_flyoff.png — 740×1416 PNG]
<2> The second card starts growing in size to take the primary slot: [02_secondcard_grows.png — 740×1416 PNG]
<3> The first card is now fully outside the viewport (expected terminal state): [03_primary_offscreen.png — 740×1416 PNG]
<4> Bug: the first card briefly reappears centered over the stack, obscuring the new top card: [04_bug_reappears_center.png — 740×1416 PNG]
<5> During this blip, the z-index and scale revert for ~150–300ms, creating a flicker that hides the second card: [05_bug_flicker_overlap.png — 740×1416 PNG]
<6> The ghosted top card disappears again, but the backdrop/card depths remain wrong for a frame (notice the third card’s scale): [06_stack_depth_incorrect.png — 740×1416 PNG]
<7> Everything finally settles and the second card is primary, but the transition looks janky due to the reappearance: [07_final_settled_state.png — 740×1416 PNG]”
Additional information
No response