Skip to content

Render image previews for read tool image results #12

@ashwin-pc

Description

@ashwin-pc

Problem

When the read tool reads an image file, the tool card only shows the placeholder text instead of the image:

Read image file [image/png]
[Image: original 1905x2053, displayed at 1856x2000. Multiply coordinates by 1.03 to map to original image.]
[image]

We should show an actual preview of the image when the card is expanded.

Implementation

  • Server: new GET /api/file/image?path=<path> endpoint (server.ts) that serves an image file from the workspace by path. Validates the path is within piCwd and has an image extension.
  • Frontend (src/tools/toolCards.ts): for successful read results that are images, render an <img> preview instead of the text note.
    • Prefers inline base64 image data when present (live executions / non-stripped results).
    • Falls back to fetching the file by path via the new endpoint (persisted history strips the base64 data, so this is the primary path for reloaded sessions).
    • Reuses attachImageActions for fullscreen / download / open-in-new-tab.
  • Raw result content is now threaded through the history render path (AddToolHistoryCard gains an optional rawResult) so inline images survive a refresh.
  • Added .toolCardImage styles.

Tests

  • Added a read image mock case (server/mock.ts) returning an inline base64 image.
  • Added an e2e test asserting an <img> preview renders and no text body is shown.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions