tiann / tiann/hapi

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

Open
#508 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area:web enhancement status:pr-open
Dominant language
TypeScript
Stars
5.1k
Forks
570
Avg merge
3d 11h
Merged PRs (30d)
61

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with web/src/components/ToolCard/views/_results.tsx and web/src/components/AssistantChat/messages/MessageAttachments.tsx, then trace how tool result content and attachments are currently rendered. Done means a shared ImageLightbox supports portal display, ESC/backdrop close, and opening in a new tab; base64 tool images and uploaded image attachments show clickable previews while text-only results remain unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.