Improve attachment handling in the Studio Code composer

[shaunandrews]

Related issues

• Related to STU-1892
• These changes affect both the new Agentic UI, and the Studio Code Tab in the current UI.

Proposed Changes

• Improve the composer attachment experience so images and other preview-able files appear as thumbnails.
• Add hover previews that show available visual/text content plus file name, type, and size, while keeping unsupported files compact and metadata-focused.
• Support sending both image and path-backed file attachments through hosted/web sessions so the composer behavior is consistent across agentic surfaces.
• Keep attachment previews scoped to the composer only, without changing attachment rendering in the chat conversation or command-line output. That will come later.

Screenshots

Testing Instructions

• Attach an image, JSON/Markdown/text file, PDF, and ZIP in the chat composer.
• Confirm image/file thumbnails stay compact, image previews crop to a square, remove buttons appear on hover/focus, and non-previewable files show metadata-only hover panels.
• Hover a text-based attachment long enough to confirm the preview pauses at the top, scrolls, pauses at the bottom, then returns.
• Confirm text inside attachment previews cannot be selected.
• Verify in both light and dark color schemes.

Validated locally:

• npx eslint --fix ...
• npm test -- tools/common/ai/tests/composer-attachments.test.ts apps/studio/src/components/studio-code-session/composer/index.test.tsx apps/ui/src/data/core/connectors/web/index.test.ts
• npm run typecheck
• Playwright light/dark attachment preview verification via /private/tmp/verify-studio-file-attachment-tiles.mjs

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[sejas]

Thanks for improving the previews of the attachments. I like the new preview on hover, and the auto-scroll in text files. I suggest making the ✖︎ remove icon more visible. Currently it's hard to spot. I tested the PR in dark and light modes.

@shaunandrews, I'm not approving this PR because I noticed that it modifies apps/hosted files, and I'm not sure if that's a desired goal of this PR.

Before	After Dark	After Light

[wpmobilebot]

📊 Performance Test Results

Comparing 0306243 vs trunk

app-size

Metric	trunk	0306243	Diff	Change
App Size (Mac)	1315.41 MB	1315.48 MB	+0.07 MB	⚪ 0.0%

site-editor

Metric	trunk	0306243	Diff	Change
load	1045 ms	1083 ms	+38 ms	⚪ 0.0%

site-startup

Metric	trunk	0306243	Diff	Change
siteCreation	6501 ms	6483 ms	18 ms	⚪ 0.0%
siteStartup	7026 ms	6973 ms	53 ms	🟢 -0.8%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

[shaunandrews]

I'm not approving this PR because I noticed that it modifies apps/hosted files, and I'm not sure if that's a desired goal of this PR.

It was initially intentional, as I wanted to cover the hosted variant of the UI as well. But since that's all up the air still, and I'm not entirely sure how we'll handle attachments in that environment, I've removed those changes. The hosted version of the UI will simply continue to ignore attachments until we figure out the details there.

[sejas]

Looks! solid. Thanks for the changes.
@shaunandrews, could we make the remove buttons more visible?

[shaunandrews]

could we make the remove buttons more visible?

Ah sorry! You mentioned it before, but I wasn't seeing that behavior in the Agentic UI. I looked in the default UI and saw it there, and fixed it. Thanks for the review!