Change the way that uploaded images are shown; remove base64 strings (Gray Screen Fix)

[hannesrudolph]

Problem

Webview URIs in frontend caused memory efficiency, but broke image visibility for OpenRouter and other providers.

Context

Created from PR: #8225

[roomote]

I've analyzed this issue and the related PR #8225. Here's my understanding and proposed implementation plan:

Problem Analysis

The issue stems from storing large base64 image data URLs directly in ClineMessage.images[] in the webview's React state. This causes memory pressure leading to "gray screen" crashes, especially with multiple or large images.

PR #8225 attempted to fix this by:

1. Using webview URIs in the frontend (memory efficient)
2. Storing base64 in backend messages for API calls

However, as noted in the PR review, there's a critical bug: the Thumbnails component filters out base64 images, but images in stored backend messages are base64 - causing images to not render in the chat view.

Proposed Implementation Plan

The solution is to implement a dual-reference approach where messages store both:

• File path (for regenerating either format)
• Display format is determined at render time

Key Changes:

1. Extend ClineMessage.images structure to optionally include file paths alongside data:

   • When images are uploaded, save them to globalStorage as files
   • Store the file path in messages (e.g., file:///path/to/image.png)
   • The file path allows regenerating webview URIs or base64 as needed

2. Frontend (Thumbnails component):

   • Accept both webview URIs and file paths
   • Convert file paths to webview URIs for display using webview.asWebviewUri()
   • This keeps the webview memory-efficient (no base64 in React state)

3. Backend (API calls):

   • When preparing messages for API calls, convert file paths to base64 on-demand
   • This happens in formatImagesIntoBlocks() in src/core/prompts/responses.ts
   • The conversion only happens at API call time, not during storage

4. Migration for existing messages:

   • For backward compatibility, continue to support inline base64 data URLs
   • New images get the file-based approach

Files to Modify:

• webview-ui/src/components/common/Thumbnails.tsx - Handle file paths and webview URIs
• src/core/prompts/responses.ts - On-demand base64 conversion for API calls
• src/core/webview/ClineProvider.ts - Image saving and webview URI generation
• packages/types/src/message.ts - Optionally extend the images type for structured data

This approach solves both the memory efficiency issue AND the display bug identified in PR #8225.

Please mention @roomote in a comment saying that you approve this plan, and I'll proceed with the implementation.