[Enhancement] Render images inline in tool results and attachments with lightbox preview

[GeT-LeFt]

Description

Tool results (Read, Bash, Markdown, Generic views) currently render only text content. Any base64 image blocks returned by a tool are dropped silently. User-uploaded image attachments in assistant messages are also displayed as filename chips with no thumbnail or preview.

This means:

• Screenshots read via the Read tool are invisible in the chat.
• Commands that emit images (charts, screenshots) produce no visible output.
• User-uploaded images can't be previewed without opening devtools.

Current behavior

• web/src/components/ToolCard/views/_results.tsx only extracts text blocks from tool result content — image blocks are skipped.
• web/src/components/AssistantChat/messages/MessageAttachments.tsx renders image attachments as plain filename chips.
• No shared image viewer component exists.

Proposed enhancement

1. Add a reusable ImageLightbox component (Portal overlay, ESC/backdrop close, open-in-new-tab).
2. Extract and render base64 image blocks when parsing tool result content in _results.tsx.
3. Wire click-to-preview into MessageAttachments for user-uploaded images.

I'll follow up with a PR. The change is additive — existing text-only tool results are unchanged.

[github-actions]

I checked the current codebase and can confirm the tool-result part of this enhancement.

Tool results are rendered from text only right now. In web/src/components/ToolCard/views/_results.tsx:23, extractTextFromContentBlock() only returns string / text values, and extractTextFromResult() only joins those text blocks in web/src/components/ToolCard/views/_results.tsx:31. ReadResultView then renders read content through CodeBlock as text in web/src/components/ToolCard/views/_results.tsx:350, so non-text result blocks are not rendered inline there.

The attachment part is partially already present in the current tree. MessageAttachments separates image attachments and renders <img src={attachment.previewUrl}> for images with a preview URL in web/src/components/AssistantChat/messages/MessageAttachments.tsx:11 and web/src/components/AssistantChat/messages/MessageAttachments.tsx:46. The upload adapter also generates previewUrl for image uploads up to 5 MB in web/src/lib/attachmentAdapter.ts:6 and web/src/lib/attachmentAdapter.ts:93, then includes that metadata when sending in web/src/lib/attachmentAdapter.ts:131. I did not find a dedicated image lightbox/viewer component in web/src; the shared dialog primitive exists in web/src/components/ui/dialog.tsx:1.

So, based on the current code, the missing pieces look like tool-result image rendering plus a larger preview/lightbox interaction for existing thumbnails.

Relevant code:

• web/src/components/ToolCard/views/_results.tsx:23 - tool result block extraction only returns text
• web/src/components/ToolCard/views/_results.tsx:31 - tool results are reduced to joined text content
• web/src/components/ToolCard/views/_results.tsx:350 - ReadResultView renders read content as a text code block
• web/src/components/AssistantChat/messages/MessageAttachments.tsx:11 - image attachments already render as <img> when previewUrl exists
• web/src/lib/attachmentAdapter.ts:93 - preview URLs are generated for image uploads under 5 MB
• web/src/components/ui/dialog.tsx:1 - reusable dialog primitive exists; no image-specific lightbox found

---

HAPI Bot