feat(web): composer attach button and view-wide image drag-and-drop

[maria-rcks]

What Changed

• Added a + attach button on the left of the composer footer that opens an image file picker, reusing the existing addComposerImages validation (image-only, size and count limits).
• Image drag-and-drop is now accepted anywhere on the chat view instead of only over the input box: the drag handlers moved from ChatComposer to the ChatView root, which shows a full-view "Drop images to attach" overlay while dragging and appends dropped images to the composer draft via a new addImages(files) method on ChatComposerHandle.

Why

Attaching images was only discoverable via paste or by dropping precisely on the input box. The + button makes uploads discoverable, and the view-wide drop zone with an explicit overlay makes drag-and-drop forgiving and clearly communicated.

UI Changes

+ attach button (light / dark):

Drop-anywhere overlay while dragging files over the chat view (light / dark):

Attachment added after dropping on the header area, far from the composer:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Low Risk
Localized chat composer UX around image attachments; reuses existing validation and draft mutation with no auth or server contract changes.

Overview
Makes image attachments easier to discover by adding a + attach control in the composer footer and moving file drag-and-drop from the composer box to the whole chat view.

The footer button opens a hidden image/* file picker and feeds files through the existing addComposerImages path (same limits as paste). ChatComposerHandle gains addImages(files) so ChatView can attach drops from anywhere in the thread UI.

While dragging files over the view, a full-screen “Drop images to attach” overlay appears. Drops are gated when the environment is unavailable or a draft has no project; drag state resets on dragend and when attaching becomes disabled mid-drag. Composer-level drop handlers and the composer drop highlight are removed in favor of this view-level zone.

^{Reviewed by Cursor Bugbot for commit 0504ff4. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add composer attach button and view-wide image drag-and-drop to chat

• Adds a PlusIcon button in the ChatComposer footer that opens a hidden file input to attach images, and exposes an addImages(files) method on the composer handle for external callers.
• Adds view-level drag-and-drop in ChatView that shows a drop overlay with ImageUpIcon when image files are dragged over the chat view, forwarding dropped files to the composer via addImages.
• Removes the previous in-composer drag-and-drop handlers; image drops are now handled at the view level.
• Behavioral Change: the drop target for images shifts from the composer frame to the full chat view container.

^{Macroscope summarized 0504ff4.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: bb1a9fcc-c952-4403-a309-d58c83d6a387

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR adds a new user-facing feature (attach button + view-wide image drag-and-drop) with new UI elements, state management, and event handling. New feature additions introducing user-facing behavior warrant human review.

^{You can customize Macroscope's approvability policy. Learn more.}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit ed760bb. Configure here.}