From e71ec43d0b12bef3c8bd683f55b6bcc007a6a126 Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Mon, 22 Sep 2025 14:46:36 -0500
Subject: [PATCH 01/20] webview: never render base64; render backend-saved
 image URIs; allow globalStorage URIs; fix 401

---
 src/activate/registerCommands.ts              |   3 +-
 src/core/webview/ClineProvider.ts             |  34 +++---
 .../webview/__tests__/ClineProvider.spec.ts   |   4 +-
 src/core/webview/webviewMessageHandler.ts     |  53 +++++++--
 src/integrations/misc/image-handler.ts        | 104 +++++++++++++++++-
 src/integrations/misc/process-images.ts       |  34 +-----
 src/shared/ExtensionMessage.ts                |   3 +
 src/shared/WebviewMessage.ts                  |   1 +
 .../src/components/chat/ChatTextArea.tsx      |  59 ++++++++--
 webview-ui/src/components/chat/ChatView.tsx   |  11 +-
 .../src/components/common/Thumbnails.tsx      |   5 +-
 .../common/__tests__/Thumbnails.spec.tsx      |  56 ++++++++++
 12 files changed, 301 insertions(+), 66 deletions(-)
 create mode 100644 webview-ui/src/components/common/__tests__/Thumbnails.spec.tsx

diff --git a/src/activate/registerCommands.ts b/src/activate/registerCommands.ts
index fac615edf11f..c3de58e5288a 100644
--- a/src/activate/registerCommands.ts
+++ b/src/activate/registerCommands.ts
@@ -256,7 +256,8 @@ export const openClineInNewTab = async ({ context, outputChannel }: Omit<Registe
 	const newPanel = vscode.window.createWebviewPanel(ClineProvider.tabPanelId, "Roo Code", targetCol, {
 		enableScripts: true,
 		retainContextWhenHidden: true,
-		localResourceRoots: [context.extensionUri],
+		// Allow webview to load images saved under globalStorageUri
+		localResourceRoots: [context.extensionUri, context.globalStorageUri],
 	})
 
 	// Save as tab type panel.
diff --git a/src/core/webview/ClineProvider.ts b/src/core/webview/ClineProvider.ts
index 9abddc6d9621..0304c4c6de6a 100644
--- a/src/core/webview/ClineProvider.ts
+++ b/src/core/webview/ClineProvider.ts
@@ -728,7 +728,7 @@ export class ClineProvider
 		})
 
 		// Set up webview options with proper resource roots
-		const resourceRoots = [this.contextProxy.extensionUri]
+		const resourceRoots = [this.contextProxy.extensionUri, this.contextProxy.globalStorageUri]
 
 		// Add workspace folders to allow access to workspace files
 		if (vscode.workspace.workspaceFolders) {
@@ -1008,7 +1008,7 @@ export class ClineProvider
 			"default-src 'none'",
 			`font-src ${webview.cspSource} data:`,
 			`style-src ${webview.cspSource} 'unsafe-inline' https://* http://${localServerUrl} http://0.0.0.0:${localPort}`,
-			`img-src ${webview.cspSource} https://storage.googleapis.com https://img.clerk.com data:`,
+			`img-src ${webview.cspSource} https://*.vscode-cdn.net https://storage.googleapis.com https://img.clerk.com data:`,
 			`media-src ${webview.cspSource}`,
 			`script-src 'unsafe-eval' ${webview.cspSource} https://* https://*.posthog.com http://${localServerUrl} http://0.0.0.0:${localPort} 'nonce-${nonce}'`,
 			`connect-src ${webview.cspSource} https://* https://*.posthog.com ws://${localServerUrl} ws://0.0.0.0:${localPort} http://${localServerUrl} http://0.0.0.0:${localPort}`,
@@ -1093,7 +1093,7 @@ export class ClineProvider
             <meta charset="utf-8">
             <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
             <meta name="theme-color" content="#000000">
-            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource} data:; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} https://storage.googleapis.com https://img.clerk.com data:; media-src ${webview.cspSource}; script-src ${webview.cspSource} 'wasm-unsafe-eval' 'nonce-${nonce}' https://us-assets.i.posthog.com 'strict-dynamic'; connect-src ${webview.cspSource} https://openrouter.ai https://api.requesty.ai https://us.i.posthog.com https://us-assets.i.posthog.com;">
+            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource} data:; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} https://*.vscode-cdn.net https://storage.googleapis.com https://img.clerk.com data:; media-src ${webview.cspSource}; script-src ${webview.cspSource} 'wasm-unsafe-eval' 'nonce-${nonce}' https://us-assets.i.posthog.com 'strict-dynamic'; connect-src ${webview.cspSource} https://openrouter.ai https://api.requesty.ai https://us.i.posthog.com https://us-assets.i.posthog.com;">
             <link rel="stylesheet" type="text/css" href="${stylesUri}">
 			<link href="${codiconsUri}" rel="stylesheet" />
 			<script nonce="${nonce}">
@@ -2720,27 +2720,35 @@ export class ClineProvider
 	 */
 	public convertToWebviewUri(filePath: string): string {
 		try {
-			const fileUri = vscode.Uri.file(filePath)
-
-			// Check if we have a webview available
+			// If a webview is available, generate a URI relative to an allowed localResourceRoot when possible.
 			if (this.view?.webview) {
+				let fileUri: vscode.Uri
+
+				// Prefer mapping under globalStorageUri to guarantee allow-list match for localResourceRoots
+				const gsRoot = this.contextProxy?.globalStorageUri?.fsPath
+				if (gsRoot && filePath.startsWith(gsRoot)) {
+					// Build a URI under the globalStorage root using joinPath
+					const rel = path.relative(gsRoot, filePath)
+					const segments = rel.split(path.sep).filter(Boolean)
+					fileUri = vscode.Uri.joinPath(this.contextProxy.globalStorageUri, ...segments)
+				} else {
+					// Fallback to direct file URI
+					fileUri = vscode.Uri.file(filePath)
+				}
+
 				const webviewUri = this.view.webview.asWebviewUri(fileUri)
 				return webviewUri.toString()
 			}
 
-			// Specific error for no webview available
-			const error = new Error("No webview available for URI conversion")
-			console.error(error.message)
-			// Fallback to file URI if no webview available
-			return fileUri.toString()
+			// No webview available; fallback to file URI
+			console.error("No webview available for URI conversion")
+			return vscode.Uri.file(filePath).toString()
 		} catch (error) {
-			// More specific error handling
 			if (error instanceof TypeError) {
 				console.error("Invalid file path provided for URI conversion:", error)
 			} else {
 				console.error("Failed to convert to webview URI:", error)
 			}
-			// Return file URI as fallback
 			return vscode.Uri.file(filePath).toString()
 		}
 	}
diff --git a/src/core/webview/__tests__/ClineProvider.spec.ts b/src/core/webview/__tests__/ClineProvider.spec.ts
index bcc9d544c290..7985acedf548 100644
--- a/src/core/webview/__tests__/ClineProvider.spec.ts
+++ b/src/core/webview/__tests__/ClineProvider.spec.ts
@@ -456,7 +456,7 @@ describe("ClineProvider", () => {
 
 		expect(mockWebviewView.webview.options).toEqual({
 			enableScripts: true,
-			localResourceRoots: [mockContext.extensionUri],
+			localResourceRoots: [mockContext.extensionUri, mockContext.globalStorageUri],
 		})
 
 		expect(mockWebviewView.webview.html).toContain("<!DOCTYPE html>")
@@ -475,7 +475,7 @@ describe("ClineProvider", () => {
 
 		expect(mockWebviewView.webview.options).toEqual({
 			enableScripts: true,
-			localResourceRoots: [mockContext.extensionUri],
+			localResourceRoots: [mockContext.extensionUri, mockContext.globalStorageUri],
 		})
 
 		expect(mockWebviewView.webview.html).toContain("<!DOCTYPE html>")
diff --git a/src/core/webview/webviewMessageHandler.ts b/src/core/webview/webviewMessageHandler.ts
index accb66f6e9c2..c2cec9138d77 100644
--- a/src/core/webview/webviewMessageHandler.ts
+++ b/src/core/webview/webviewMessageHandler.ts
@@ -36,7 +36,12 @@ import { checkExistKey } from "../../shared/checkExistApiConfig"
 import { experimentDefault } from "../../shared/experiments"
 import { Terminal } from "../../integrations/terminal/Terminal"
 import { openFile } from "../../integrations/misc/open-file"
-import { openImage, saveImage } from "../../integrations/misc/image-handler"
+import {
+	openImage,
+	saveImage,
+	savePastedImageToTemp,
+	importImageToGlobalStorage,
+} from "../../integrations/misc/image-handler"
 import { selectImages } from "../../integrations/misc/process-images"
 import { getTheme } from "../../integrations/theme/getTheme"
 import { discoverChromeHostUrl, tryChromeHostUrl } from "../../services/browser/browserDiscovery"
@@ -614,13 +619,24 @@ export const webviewMessageHandler = async (
 			await provider.postStateToWebview()
 			break
 		case "selectImages":
-			const images = await selectImages()
-			await provider.postMessageToWebview({
-				type: "selectedImages",
-				images,
-				context: message.context,
-				messageTs: message.messageTs,
-			})
+			// Copy selected images into global storage and return webview-safe URIs
+			{
+				const pickedPaths = await selectImages()
+				const results = await Promise.all(
+					(pickedPaths || []).map((p) => importImageToGlobalStorage(p, provider)),
+				)
+				// Ensure URIs are derived via current webview context if available
+				const images = results
+					.filter((r): r is { imagePath: string; imageUri: string } => !!r)
+					.map((r) => provider?.convertToWebviewUri?.(r.imagePath) ?? r.imageUri)
+
+				await provider.postMessageToWebview({
+					type: "selectedImages",
+					images,
+					context: message.context,
+					messageTs: message.messageTs,
+				})
+			}
 			break
 		case "exportCurrentTask":
 			const currentTaskId = provider.getCurrentTask()?.taskId
@@ -3035,5 +3051,26 @@ export const webviewMessageHandler = async (
 			})
 			break
 		}
+		case "savePastedImage": {
+			// Save pasted image to temporary file and return path and URI
+			if (message.dataUri) {
+				const result = await savePastedImageToTemp(message.dataUri, provider)
+				if (result) {
+					await provider.postMessageToWebview({
+						type: "pastedImageSaved",
+						imagePath: result.imagePath,
+						imageUri: result.imageUri,
+						requestId: message.requestId,
+					})
+				} else {
+					await provider.postMessageToWebview({
+						type: "pastedImageSaved",
+						error: "Failed to save pasted image",
+						requestId: message.requestId,
+					})
+				}
+			}
+			break
+		}
 	}
 }
diff --git a/src/integrations/misc/image-handler.ts b/src/integrations/misc/image-handler.ts
index 7a2e7da24c72..24e18e5d57bb 100644
--- a/src/integrations/misc/image-handler.ts
+++ b/src/integrations/misc/image-handler.ts
@@ -1,6 +1,7 @@
 import * as path from "path"
 import * as os from "os"
 import * as vscode from "vscode"
+import * as fs from "fs/promises"
 import { getWorkspacePath } from "../../utils/path"
 import { t } from "../../i18n"
 
@@ -42,7 +43,6 @@ export async function openImage(dataUriOrPath: string, options?: { values?: { ac
 		return
 	}
 
-	// Handle data URI (existing logic)
 	const matches = dataUriOrPath.match(/^data:image\/([a-zA-Z]+);base64,(.+)$/)
 	if (!matches) {
 		vscode.window.showErrorMessage(t("common:errors.invalid_data_uri"))
@@ -90,6 +90,108 @@ export async function openImage(dataUriOrPath: string, options?: { values?: { ac
 	}
 }
 
+/**
+ * Save a pasted/dropped image to global storage and return its path and webview URI
+ * This uses VSCode's global storage for persistence across sessions
+ */
+export async function importImageToGlobalStorage(
+	imagePath: string,
+	provider?: any,
+): Promise<{ imagePath: string; imageUri: string } | null> {
+	try {
+		// Determine storage directory (global storage preferred, fallback to temp)
+		let imagesDir: string
+		if (provider?.contextProxy?.globalStorageUri) {
+			const globalStoragePath = provider.contextProxy.globalStorageUri.fsPath
+			const taskId = provider.getCurrentTask?.()?.taskId
+			imagesDir = taskId
+				? path.join(globalStoragePath, "user-images", `task-${taskId}`)
+				: path.join(globalStoragePath, "user-images", "general")
+		} else {
+			console.warn("Provider context not available, falling back to temp directory")
+			imagesDir = path.join(os.tmpdir(), "roo-user-images")
+		}
+
+		await fs.mkdir(imagesDir, { recursive: true })
+
+		// Preserve original extension if possible
+		const ext = path.extname(imagePath) || ".png"
+		const timestamp = Date.now()
+		const randomId = Math.random().toString(36).substring(2, 8)
+		const destFileName = `imported_image_${timestamp}_${randomId}${ext}`
+		const destPath = path.join(imagesDir, destFileName)
+
+		// Copy the original image into global storage
+		await fs.copyFile(imagePath, destPath)
+
+		// Convert to webview URI
+		let webviewUri = provider?.convertToWebviewUri?.(destPath) ?? vscode.Uri.file(destPath).toString()
+
+		return { imagePath: destPath, imageUri: webviewUri }
+	} catch (error) {
+		console.error("Failed to import image into global storage:", error)
+		return null
+	}
+}
+
+export async function savePastedImageToTemp(
+	dataUri: string,
+	provider?: any,
+): Promise<{ imagePath: string; imageUri: string } | null> {
+	const matches = dataUri.match(/^data:image\/([a-zA-Z]+);base64,(.+)$/)
+	if (!matches) {
+		return null
+	}
+
+	const [, format, base64Data] = matches
+	const imageBuffer = Buffer.from(base64Data, "base64")
+
+	// Determine storage directory
+	let imagesDir: string
+
+	// Use global storage if provider context is available
+	if (provider?.contextProxy?.globalStorageUri) {
+		const globalStoragePath = provider.contextProxy.globalStorageUri.fsPath
+
+		// Organize by task ID if available
+		const taskId = provider.getCurrentTask?.()?.taskId
+		if (taskId) {
+			imagesDir = path.join(globalStoragePath, "pasted-images", `task-${taskId}`)
+		} else {
+			// Fallback to general pasted-images directory
+			imagesDir = path.join(globalStoragePath, "pasted-images", "general")
+		}
+	} else {
+		// Fallback to temp directory if provider context is not available
+		console.warn("Provider context not available, falling back to temp directory")
+		imagesDir = path.join(os.tmpdir(), "roo-pasted-images")
+	}
+
+	// Create directory if it doesn't exist
+	await fs.mkdir(imagesDir, { recursive: true })
+
+	// Generate a unique filename
+	const timestamp = Date.now()
+	const randomId = Math.random().toString(36).substring(2, 8)
+	const fileName = `pasted_image_${timestamp}_${randomId}.${format}`
+	const imagePath = path.join(imagesDir, fileName)
+
+	try {
+		// Write the image to the file
+		await fs.writeFile(imagePath, imageBuffer)
+
+		// Convert to webview URI if provider is available
+		let imageUri = provider?.convertToWebviewUri?.(imagePath) ?? vscode.Uri.file(imagePath).toString()
+
+		// Do not append custom query params to VS Code webview URIs (can break auth token and cause 401)
+
+		return { imagePath, imageUri }
+	} catch (error) {
+		console.error("Failed to save pasted image:", error)
+		return null
+	}
+}
+
 export async function saveImage(dataUri: string) {
 	const matches = dataUri.match(/^data:image\/([a-zA-Z]+);base64,(.+)$/)
 	if (!matches) {
diff --git a/src/integrations/misc/process-images.ts b/src/integrations/misc/process-images.ts
index cf3e201538dc..5427de892653 100644
--- a/src/integrations/misc/process-images.ts
+++ b/src/integrations/misc/process-images.ts
@@ -1,7 +1,9 @@
 import * as vscode from "vscode"
-import fs from "fs/promises"
-import * as path from "path"
 
+/**
+ * Open a file picker to select images, returning absolute file system paths.
+ * Rendering-friendly webview URIs will be produced in the webviewMessageHandler.
+ */
 export async function selectImages(): Promise<string[]> {
 	const options: vscode.OpenDialogOptions = {
 		canSelectMany: true,
@@ -12,34 +14,10 @@ export async function selectImages(): Promise<string[]> {
 	}
 
 	const fileUris = await vscode.window.showOpenDialog(options)
-
 	if (!fileUris || fileUris.length === 0) {
 		return []
 	}
 
-	return await Promise.all(
-		fileUris.map(async (uri) => {
-			const imagePath = uri.fsPath
-			const buffer = await fs.readFile(imagePath)
-			const base64 = buffer.toString("base64")
-			const mimeType = getMimeType(imagePath)
-			const dataUrl = `data:${mimeType};base64,${base64}`
-			return dataUrl
-		}),
-	)
-}
-
-function getMimeType(filePath: string): string {
-	const ext = path.extname(filePath).toLowerCase()
-	switch (ext) {
-		case ".png":
-			return "image/png"
-		case ".jpeg":
-		case ".jpg":
-			return "image/jpeg"
-		case ".webp":
-			return "image/webp"
-		default:
-			throw new Error(`Unsupported file type: ${ext}`)
-	}
+	// Return fs paths only; do not read/encode files here.
+	return fileUris.map((uri) => uri.fsPath)
 }
diff --git a/src/shared/ExtensionMessage.ts b/src/shared/ExtensionMessage.ts
index aaddc520cb9f..3be28eaa5494 100644
--- a/src/shared/ExtensionMessage.ts
+++ b/src/shared/ExtensionMessage.ts
@@ -124,6 +124,7 @@ export interface ExtensionMessage {
 		| "commands"
 		| "insertTextIntoTextarea"
 		| "dismissedUpsells"
+		| "pastedImageSaved"
 	text?: string
 	payload?: any // Add a generic payload for now, can refine later
 	action?:
@@ -201,6 +202,8 @@ export interface ExtensionMessage {
 	commands?: Command[]
 	queuedMessages?: QueuedMessage[]
 	list?: string[] // For dismissedUpsells
+	imagePath?: string // For pastedImageSaved
+	imageUri?: string // For pastedImageSaved
 }
 
 export type ExtensionState = Pick<
diff --git a/src/shared/WebviewMessage.ts b/src/shared/WebviewMessage.ts
index 93d0b9bc4520..786f4b4fd142 100644
--- a/src/shared/WebviewMessage.ts
+++ b/src/shared/WebviewMessage.ts
@@ -225,6 +225,7 @@ export interface WebviewMessage {
 		| "editQueuedMessage"
 		| "dismissUpsell"
 		| "getDismissedUpsells"
+		| "savePastedImage"
 	text?: string
 	editedMessageContent?: string
 	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "cloud"
diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx
index fb105056b55c..849140f5de37 100644
--- a/webview-ui/src/components/chat/ChatTextArea.tsx
+++ b/webview-ui/src/components/chat/ChatTextArea.tsx
@@ -121,7 +121,23 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			const messageHandler = (event: MessageEvent) => {
 				const message = event.data
 
-				if (message.type === "enhancedPrompt") {
+				if (message.type === "pastedImageSaved") {
+					// Handle response from backend after saving pasted image
+					if (message.requestId && pendingImageUploadsRef.current.has(message.requestId)) {
+						// Remove from pending uploads
+						pendingImageUploadsRef.current.delete(message.requestId)
+
+						if (message.imageUri && !message.error) {
+							// Add the file URI to selected images (never base64)
+							setSelectedImages((prevImages) =>
+								[...prevImages, message.imageUri].slice(0, MAX_IMAGES_PER_MESSAGE),
+							)
+						} else {
+							console.error("Failed to save pasted image:", message.error)
+							// Do not fallback to base64 to ensure it is never rendered
+						}
+					}
+				} else if (message.type === "enhancedPrompt") {
 					if (message.text && textAreaRef.current) {
 						try {
 							// Use execCommand to replace text while preserving undo history
@@ -194,7 +210,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 
 			window.addEventListener("message", messageHandler)
 			return () => window.removeEventListener("message", messageHandler)
-		}, [setInputValue, searchRequestId, inputValue])
+		}, [setInputValue, searchRequestId, inputValue, setSelectedImages])
 
 		const [isDraggingOver, setIsDraggingOver] = useState(false)
 		const [textAreaBaseHeight, setTextAreaBaseHeight] = useState<number | undefined>(undefined)
@@ -630,6 +646,10 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			setIsFocused(false)
 		}, [isMouseDownOnMenu])
 
+		// Track pending image upload request IDs only (never store base64)
+		// This ensures the frontend never retains image data URLs
+		const pendingImageUploadsRef = useRef<Set<string>>(new Set())
+
 		const handlePaste = useCallback(
 			async (e: React.ClipboardEvent) => {
 				const items = e.clipboardData.items
@@ -699,13 +719,26 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					const dataUrls = imageDataArray.filter((dataUrl): dataUrl is string => dataUrl !== null)
 
 					if (dataUrls.length > 0) {
-						setSelectedImages((prevImages) => [...prevImages, ...dataUrls].slice(0, MAX_IMAGES_PER_MESSAGE))
+						// Process each image: send to backend to save as temp file
+						for (const dataUrl of dataUrls) {
+							const requestId = Math.random().toString(36).substring(2, 9)
+
+							// Track request ID only; never store base64
+							pendingImageUploadsRef.current.add(requestId)
+
+							// Send to backend to save as temporary file
+							vscode.postMessage({
+								type: "savePastedImage",
+								dataUri: dataUrl,
+								requestId: requestId,
+							})
+						}
 					} else {
 						console.warn(t("chat:noValidImages"))
 					}
 				}
 			},
-			[shouldDisableImages, setSelectedImages, cursorPosition, setInputValue, inputValue, t],
+			[shouldDisableImages, cursorPosition, setInputValue, inputValue, t],
 		)
 
 		const handleMenuMouseDown = useCallback(() => {
@@ -851,12 +884,19 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						const dataUrls = imageDataArray.filter((dataUrl): dataUrl is string => dataUrl !== null)
 
 						if (dataUrls.length > 0) {
-							setSelectedImages((prevImages) =>
-								[...prevImages, ...dataUrls].slice(0, MAX_IMAGES_PER_MESSAGE),
-							)
+							// Process each dropped image: send to backend to save as temp file
+							for (const dataUrl of dataUrls) {
+								const requestId = Math.random().toString(36).substring(2, 9)
 
-							if (typeof vscode !== "undefined") {
-								vscode.postMessage({ type: "draggedImages", dataUrls: dataUrls })
+								// Track request ID only; never store base64
+								pendingImageUploadsRef.current.add(requestId)
+
+								// Send to backend to save as temporary file
+								vscode.postMessage({
+									type: "savePastedImage",
+									dataUri: dataUrl,
+									requestId: requestId,
+								})
 							}
 						} else {
 							console.warn(t("chat:noValidImages"))
@@ -872,7 +912,6 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				setCursorPosition,
 				setIntendedCursorPosition,
 				shouldDisableImages,
-				setSelectedImages,
 				t,
 			],
 		)
diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx
index d358c68f1cff..0388a5362599 100644
--- a/webview-ui/src/components/chat/ChatView.tsx
+++ b/webview-ui/src/components/chat/ChatView.tsx
@@ -663,7 +663,10 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 			}
 
 			setInputValue(newValue)
-			setSelectedImages([...selectedImages, ...images])
+			setSelectedImages([
+				...selectedImages,
+				...(images || []).filter((i) => typeof i === "string" && !i.startsWith("data:")),
+			])
 		},
 		[inputValue, selectedImages],
 	)
@@ -798,7 +801,11 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 					// When context is "edit", ChatRow will handle the images
 					if (message.context !== "edit") {
 						setSelectedImages((prevImages: string[]) =>
-							appendImages(prevImages, message.images, MAX_IMAGES_PER_MESSAGE),
+							appendImages(
+								prevImages,
+								(message.images || []).filter((i) => typeof i === "string" && !i.startsWith("data:")),
+								MAX_IMAGES_PER_MESSAGE,
+							),
 						)
 					}
 					break
diff --git a/webview-ui/src/components/common/Thumbnails.tsx b/webview-ui/src/components/common/Thumbnails.tsx
index d0db36d5612c..67485324c65d 100644
--- a/webview-ui/src/components/common/Thumbnails.tsx
+++ b/webview-ui/src/components/common/Thumbnails.tsx
@@ -36,6 +36,9 @@ const Thumbnails = ({ images, style, setImages, onHeightChange }: ThumbnailsProp
 		vscode.postMessage({ type: "openImage", text: image })
 	}
 
+	// Never render base64 data URIs
+	const safeImages = images.filter((img) => typeof img === "string" && !img.startsWith("data:"))
+
 	return (
 		<div
 			ref={containerRef}
@@ -47,7 +50,7 @@ const Thumbnails = ({ images, style, setImages, onHeightChange }: ThumbnailsProp
 				rowGap: 3,
 				...style,
 			}}>
-			{images.map((image, index) => (
+			{safeImages.map((image, index) => (
 				<div
 					key={index}
 					style={{ position: "relative" }}
diff --git a/webview-ui/src/components/common/__tests__/Thumbnails.spec.tsx b/webview-ui/src/components/common/__tests__/Thumbnails.spec.tsx
new file mode 100644
index 000000000000..d416ce9fb721
--- /dev/null
+++ b/webview-ui/src/components/common/__tests__/Thumbnails.spec.tsx
@@ -0,0 +1,56 @@
+import React from "react"
+import { render, fireEvent, screen } from "@src/utils/test-utils"
+
+// Mock vscode.postMessage
+vi.mock("@src/utils/vscode", () => ({
+	vscode: {
+		postMessage: vi.fn(),
+	},
+}))
+import { vscode } from "@src/utils/vscode"
+
+import Thumbnails from "../Thumbnails"
+
+describe("Thumbnails", () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+	})
+
+	it("filters out base64 data URIs and renders only safe image URIs", () => {
+		const images = [
+			"data:image/png;base64,AAAA", // should be filtered
+			"file:///tmp/saved-image-1.png",
+			"https://example.com/image-2.webp",
+		]
+
+		render(<Thumbnails images={images} />)
+
+		const imgs = screen.getAllByRole("img") as HTMLImageElement[]
+		expect(imgs.length).toBe(2)
+		// Ensure no rendered src starts with data:
+		for (const img of imgs) {
+			const src = img.getAttribute("src") || ""
+			expect(src.startsWith("data:")).toBe(false)
+		}
+	})
+
+	it("posts openImage with clicked image URI (never base64)", () => {
+		const images = ["data:image/png;base64,BBBB", "file:///tmp/saved-image.png"]
+		render(<Thumbnails images={images} />)
+
+		const imgs = screen.getAllByRole("img") as HTMLImageElement[]
+		// Only the safe one should render
+		expect(imgs.length).toBe(1)
+
+		const safeImg = imgs[0]
+		const src = safeImg.getAttribute("src") || ""
+		expect(src.startsWith("data:")).toBe(false)
+
+		fireEvent.click(safeImg)
+
+		expect(vscode.postMessage).toHaveBeenCalledWith({
+			type: "openImage",
+			text: src,
+		})
+	})
+})

From addd1bc6e757cdd7a713b90033307548c003af24 Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Tue, 23 Sep 2025 14:53:09 -0500
Subject: [PATCH 02/20] feat: enhance openImage function to handle vscode
 webview CDN URLs

---
 .../misc/__tests__/image-handler.spec.ts      | 76 +++++++++++++++++++
 src/integrations/misc/image-handler.ts        | 70 ++++++++++++-----
 2 files changed, 125 insertions(+), 21 deletions(-)
 create mode 100644 src/integrations/misc/__tests__/image-handler.spec.ts

diff --git a/src/integrations/misc/__tests__/image-handler.spec.ts b/src/integrations/misc/__tests__/image-handler.spec.ts
new file mode 100644
index 000000000000..d5871773f37f
--- /dev/null
+++ b/src/integrations/misc/__tests__/image-handler.spec.ts
@@ -0,0 +1,76 @@
+vi.mock("vscode", () => {
+	const executeCommand = vi.fn()
+	const writeText = vi.fn()
+	const showInformationMessage = vi.fn()
+	const showErrorMessage = vi.fn()
+	const file = vi.fn((p: string) => ({ fsPath: p, path: p, scheme: "file" }))
+	const parse = (input: string) => {
+		if (input.startsWith("https://") && input.includes("vscode-cdn.net")) {
+			const url = new URL(input)
+			return {
+				scheme: "https",
+				authority: url.host,
+				path: url.pathname,
+				fsPath: url.pathname,
+				with: vi.fn(),
+			}
+		}
+		if (input.startsWith("file://")) {
+			return {
+				scheme: "file",
+				authority: "",
+				path: input.substring("file://".length),
+				fsPath: input.substring("file://".length),
+				with: vi.fn(),
+			}
+		}
+		return {
+			scheme: "file",
+			authority: "",
+			path: input,
+			fsPath: input,
+			with: vi.fn(),
+		}
+	}
+	return {
+		commands: { executeCommand },
+		env: { clipboard: { writeText } },
+		window: { showInformationMessage, showErrorMessage },
+		Uri: { file, parse },
+	}
+})
+
+import * as vscode from "vscode"
+import { openImage } from "../image-handler"
+
+describe("openImage - vscode webview CDN url handling", () => {
+	const cdnUrlPosix = "https://file+.vscode-resource.vscode-cdn.net/file//Users/test/workspace/image.png"
+
+	beforeEach(() => {
+		vi.clearAllMocks()
+	})
+
+	test("opens image from vscode-cdn webview URL by stripping /file/ and normalizing", async () => {
+		await openImage(cdnUrlPosix)
+
+		// Should normalize to /Users/test/workspace/image.png and open it
+		expect((vscode.Uri.file as any).mock.calls.length).toBe(1)
+		const calledWithPath = (vscode.Uri.file as any).mock.calls[0][0]
+		expect(calledWithPath).toBe(require("path").normalize("/Users/test/workspace/image.png"))
+
+		expect(vscode.commands.executeCommand).toHaveBeenCalledTimes(1)
+		expect(vscode.commands.executeCommand).toHaveBeenCalledWith(
+			"vscode.open",
+			expect.objectContaining({ fsPath: calledWithPath }),
+		)
+		expect(vscode.window.showErrorMessage).not.toHaveBeenCalled()
+	})
+
+	test("copy action writes normalized fs path to clipboard (no open)", async () => {
+		await openImage(cdnUrlPosix, { values: { action: "copy" } })
+
+		const expectedPath = require("path").normalize("/Users/test/workspace/image.png")
+		expect(vscode.env.clipboard.writeText).toHaveBeenCalledWith(expectedPath)
+		expect(vscode.commands.executeCommand).not.toHaveBeenCalled()
+	})
+})
diff --git a/src/integrations/misc/image-handler.ts b/src/integrations/misc/image-handler.ts
index 24e18e5d57bb..e0af2b19e62e 100644
--- a/src/integrations/misc/image-handler.ts
+++ b/src/integrations/misc/image-handler.ts
@@ -6,18 +6,51 @@ import { getWorkspacePath } from "../../utils/path"
 import { t } from "../../i18n"
 
 export async function openImage(dataUriOrPath: string, options?: { values?: { action?: string } }) {
-	// Check if it's a file path (absolute or relative)
+	// Minimal handling for VS Code webview CDN URLs:
+	// Example: https://file+.vscode-resource.vscode-cdn.net/file/<absolute_path_to_image>
+	try {
+		const u = vscode.Uri.parse(dataUriOrPath)
+		if (u.scheme === "https" && u.authority.includes("vscode-cdn.net")) {
+			let fsPath = decodeURIComponent(u.path || "")
+			// Strip the leading "/file/" prefix if present
+			if (fsPath.startsWith("/file/")) {
+				fsPath = fsPath.slice("/file/".length)
+			}
+
+			fsPath = path.normalize(fsPath)
+			if (fsPath) {
+				const fileUri = vscode.Uri.file(fsPath)
+				await vscode.commands.executeCommand("vscode.open", fileUri)
+				return
+			}
+		}
+	} catch {
+		// fall through
+	}
+
+	// Handle file:// URIs directly
+	if (dataUriOrPath.startsWith("file://")) {
+		try {
+			const fileUri = vscode.Uri.parse(dataUriOrPath)
+
+			await vscode.commands.executeCommand("vscode.open", fileUri)
+		} catch (error) {
+			vscode.window.showErrorMessage(t("common:errors.error_opening_image", { error }))
+		}
+		return
+	}
+
+	// Fallback: treat plain strings (absolute or relative) as file paths
 	const isFilePath =
 		!dataUriOrPath.startsWith("data:") &&
 		!dataUriOrPath.startsWith("http:") &&
 		!dataUriOrPath.startsWith("https:") &&
 		!dataUriOrPath.startsWith("vscode-resource:") &&
-		!dataUriOrPath.startsWith("file+.vscode-resource")
+		!dataUriOrPath.startsWith("file+.vscode-resource") &&
+		!dataUriOrPath.startsWith("vscode-webview-resource:")
 
 	if (isFilePath) {
-		// Handle file path - open directly in VSCode
 		try {
-			// Resolve the path relative to workspace if needed
 			let filePath = dataUriOrPath
 			if (!path.isAbsolute(filePath)) {
 				const workspacePath = getWorkspacePath()
@@ -28,14 +61,12 @@ export async function openImage(dataUriOrPath: string, options?: { values?: { ac
 
 			const fileUri = vscode.Uri.file(filePath)
 
-			// Check if this is a copy action
 			if (options?.values?.action === "copy") {
 				await vscode.env.clipboard.writeText(filePath)
 				vscode.window.showInformationMessage(t("common:info.path_copied_to_clipboard"))
 				return
 			}
 
-			// Open the image file directly
 			await vscode.commands.executeCommand("vscode.open", fileUri)
 		} catch (error) {
 			vscode.window.showErrorMessage(t("common:errors.error_opening_image", { error }))
@@ -43,47 +74,44 @@ export async function openImage(dataUriOrPath: string, options?: { values?: { ac
 		return
 	}
 
+	// Finally, handle base64 data URIs explicitly
 	const matches = dataUriOrPath.match(/^data:image\/([a-zA-Z]+);base64,(.+)$/)
 	if (!matches) {
-		vscode.window.showErrorMessage(t("common:errors.invalid_data_uri"))
+		// Do not show an "invalid data URI" error for non-data URIs; try opening as a generic URI
+		try {
+			const generic = vscode.Uri.parse(dataUriOrPath)
+			await vscode.commands.executeCommand("vscode.open", generic)
+		} catch {
+			vscode.window.showErrorMessage(t("common:errors.invalid_data_uri"))
+		}
 		return
 	}
+
 	const [, format, base64Data] = matches
 	const imageBuffer = Buffer.from(base64Data, "base64")
 
-	// Default behavior: open the image
 	const tempFilePath = path.join(os.tmpdir(), `temp_image_${Date.now()}.${format}`)
 	try {
 		await vscode.workspace.fs.writeFile(vscode.Uri.file(tempFilePath), imageBuffer)
-		// Check if this is a copy action
+
 		if (options?.values?.action === "copy") {
 			try {
-				// Read the image file
 				const imageData = await vscode.workspace.fs.readFile(vscode.Uri.file(tempFilePath))
-
-				// Convert to base64 for clipboard
 				const base64Image = Buffer.from(imageData).toString("base64")
 				const dataUri = `data:image/${format};base64,${base64Image}`
-
-				// Use vscode.env.clipboard to copy the data URI
-				// Note: VSCode doesn't support copying binary image data directly to clipboard
-				// So we copy the data URI which can be pasted in many applications
 				await vscode.env.clipboard.writeText(dataUri)
-
 				vscode.window.showInformationMessage(t("common:info.image_copied_to_clipboard"))
 			} catch (error) {
 				const errorMessage = error instanceof Error ? error.message : String(error)
 				vscode.window.showErrorMessage(t("common:errors.error_copying_image", { errorMessage }))
 			} finally {
-				// Clean up temp file
 				try {
 					await vscode.workspace.fs.delete(vscode.Uri.file(tempFilePath))
-				} catch {
-					// Ignore cleanup errors
-				}
+				} catch {}
 			}
 			return
 		}
+
 		await vscode.commands.executeCommand("vscode.open", vscode.Uri.file(tempFilePath))
 	} catch (error) {
 		vscode.window.showErrorMessage(t("common:errors.error_opening_image", { error }))

From b10c87422a7c456c3a2b8745146ffae88c1dd1d4 Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Tue, 23 Sep 2025 14:57:26 -0500
Subject: [PATCH 03/20] feat: add clipboard copy functionality to openImage for
 file paths

---
 src/integrations/misc/image-handler.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/integrations/misc/image-handler.ts b/src/integrations/misc/image-handler.ts
index e0af2b19e62e..d16a13ee321a 100644
--- a/src/integrations/misc/image-handler.ts
+++ b/src/integrations/misc/image-handler.ts
@@ -16,10 +16,14 @@ export async function openImage(dataUriOrPath: string, options?: { values?: { ac
 			if (fsPath.startsWith("/file/")) {
 				fsPath = fsPath.slice("/file/".length)
 			}
-
 			fsPath = path.normalize(fsPath)
 			if (fsPath) {
 				const fileUri = vscode.Uri.file(fsPath)
+				if (options?.values?.action === "copy") {
+					await vscode.env.clipboard.writeText(fsPath)
+					vscode.window.showInformationMessage(t("common:info.path_copied_to_clipboard"))
+					return
+				}
 				await vscode.commands.executeCommand("vscode.open", fileUri)
 				return
 			}
@@ -32,6 +36,13 @@ export async function openImage(dataUriOrPath: string, options?: { values?: { ac
 	if (dataUriOrPath.startsWith("file://")) {
 		try {
 			const fileUri = vscode.Uri.parse(dataUriOrPath)
+			const filePath = fileUri.fsPath
+
+			if (options?.values?.action === "copy") {
+				await vscode.env.clipboard.writeText(filePath)
+				vscode.window.showInformationMessage(t("common:info.path_copied_to_clipboard"))
+				return
+			}
 
 			await vscode.commands.executeCommand("vscode.open", fileUri)
 		} catch (error) {

From ab402bf1d9bdf5ab0712313681725f08b49dc98a Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Tue, 23 Sep 2025 15:06:27 -0500
Subject: [PATCH 04/20] fix: improve vscode-cdn.net URL validation and add copy
 action check

- Fixed CodeQL security issue by properly validating vscode-cdn.net domain instead of substring check
- Added missing copy action check for HTTPS/vscode-cdn URLs before opening image
- Updated tests to match the more secure URL validation logic
---
 .../misc/__tests__/image-handler.spec.ts        | 17 ++++++++++-------
 src/integrations/misc/image-handler.ts          |  8 ++++++--
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/integrations/misc/__tests__/image-handler.spec.ts b/src/integrations/misc/__tests__/image-handler.spec.ts
index d5871773f37f..f61721f64959 100644
--- a/src/integrations/misc/__tests__/image-handler.spec.ts
+++ b/src/integrations/misc/__tests__/image-handler.spec.ts
@@ -5,14 +5,17 @@ vi.mock("vscode", () => {
 	const showErrorMessage = vi.fn()
 	const file = vi.fn((p: string) => ({ fsPath: p, path: p, scheme: "file" }))
 	const parse = (input: string) => {
-		if (input.startsWith("https://") && input.includes("vscode-cdn.net")) {
+		if (input.startsWith("https://")) {
 			const url = new URL(input)
-			return {
-				scheme: "https",
-				authority: url.host,
-				path: url.pathname,
-				fsPath: url.pathname,
-				with: vi.fn(),
+			// More secure check: ensure vscode-cdn.net is the actual domain, not just a substring
+			if (url.host === "vscode-cdn.net" || url.host.endsWith(".vscode-cdn.net")) {
+				return {
+					scheme: "https",
+					authority: url.host,
+					path: url.pathname,
+					fsPath: url.pathname,
+					with: vi.fn(),
+				}
 			}
 		}
 		if (input.startsWith("file://")) {
diff --git a/src/integrations/misc/image-handler.ts b/src/integrations/misc/image-handler.ts
index d16a13ee321a..f66c5a31237d 100644
--- a/src/integrations/misc/image-handler.ts
+++ b/src/integrations/misc/image-handler.ts
@@ -10,7 +10,11 @@ export async function openImage(dataUriOrPath: string, options?: { values?: { ac
 	// Example: https://file+.vscode-resource.vscode-cdn.net/file/<absolute_path_to_image>
 	try {
 		const u = vscode.Uri.parse(dataUriOrPath)
-		if (u.scheme === "https" && u.authority.includes("vscode-cdn.net")) {
+		if (
+			u.scheme === "https" &&
+			u.authority &&
+			(u.authority === "vscode-cdn.net" || u.authority.endsWith(".vscode-cdn.net"))
+		) {
 			let fsPath = decodeURIComponent(u.path || "")
 			// Strip the leading "/file/" prefix if present
 			if (fsPath.startsWith("/file/")) {
@@ -18,12 +22,12 @@ export async function openImage(dataUriOrPath: string, options?: { values?: { ac
 			}
 			fsPath = path.normalize(fsPath)
 			if (fsPath) {
-				const fileUri = vscode.Uri.file(fsPath)
 				if (options?.values?.action === "copy") {
 					await vscode.env.clipboard.writeText(fsPath)
 					vscode.window.showInformationMessage(t("common:info.path_copied_to_clipboard"))
 					return
 				}
+				const fileUri = vscode.Uri.file(fsPath)
 				await vscode.commands.executeCommand("vscode.open", fileUri)
 				return
 			}

From e7531e5b6e0d2d9f7c50118d3926028023ddbcb8 Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Mon, 27 Oct 2025 12:42:27 -0500
Subject: [PATCH 05/20] fix: complete PR #8225 - add missing webview URI to
 base64 conversion

- Add normalizeImageRefsToDataUrls() function to convert webview URIs to base64 data URLs
- Add formatImagesIntoBlocksAsync() for async image processing in backend
- Update Task.ts to use async conversion when storing images in backend messages
- Backend now stores base64 (for API calls), frontend displays webview URIs (memory efficient)
- Fixes OpenRouter and other providers not being able to see attached images
- Maintains PR goals: webview memory efficiency + working image functionality
---
 src/core/prompts/responses.ts                 | 18 ++++
 src/core/task/Task.ts                         |  9 +-
 .../misc/__tests__/imageDataUrl.spec.ts       | 63 +++++++++++++
 src/integrations/misc/imageDataUrl.ts         | 94 +++++++++++++++++++
 4 files changed, 182 insertions(+), 2 deletions(-)
 create mode 100644 src/integrations/misc/__tests__/imageDataUrl.spec.ts
 create mode 100644 src/integrations/misc/imageDataUrl.ts

diff --git a/src/core/prompts/responses.ts b/src/core/prompts/responses.ts
index fd51b18feda4..980c70c4dd62 100644
--- a/src/core/prompts/responses.ts
+++ b/src/core/prompts/responses.ts
@@ -3,6 +3,7 @@ import * as path from "path"
 import * as diff from "diff"
 import { RooIgnoreController, LOCK_TEXT_SYMBOL } from "../ignore/RooIgnoreController"
 import { RooProtectedController } from "../protect/RooProtectedController"
+import { normalizeImageRefsToDataUrls } from "../../integrations/misc/imageDataUrl"
 
 export const formatResponse = {
 	toolDenied: () => `The user denied this operation.`,
@@ -200,6 +201,23 @@ const formatImagesIntoBlocks = (images?: string[]): Anthropic.ImageBlockParam[]
 		: []
 }
 
+/**
+ * Async version that converts webview URIs to base64 data URLs before creating image blocks
+ * This is the missing piece from PR #8225 - allows frontend to use webview URIs while
+ * backend stores base64 for API calls.
+ */
+export const formatImagesIntoBlocksAsync = async (images?: string[]): Promise<Anthropic.ImageBlockParam[]> => {
+	if (!images || images.length === 0) {
+		return []
+	}
+
+	// Convert any webview URIs to base64 data URLs
+	const dataUrls = await normalizeImageRefsToDataUrls(images)
+
+	// Now use the regular function to create image blocks
+	return formatImagesIntoBlocks(dataUrls)
+}
+
 const toolUseInstructionsReminder = `# Reminder: Instructions for Tool Use
 
 Tool uses are formatted using XML-style tags. The tool name itself becomes the XML tag name. Each parameter is enclosed within its own set of tags. Here's the structure:
diff --git a/src/core/task/Task.ts b/src/core/task/Task.ts
index 2dd9e55c0bc3..2ae6f694ecba 100644
--- a/src/core/task/Task.ts
+++ b/src/core/task/Task.ts
@@ -1215,7 +1215,9 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 		await this.say("text", task, images)
 		this.isInitialized = true
 
-		let imageBlocks: Anthropic.ImageBlockParam[] = formatResponse.imageBlocks(images)
+		// Convert webview URIs to base64 for backend storage
+		const { formatImagesIntoBlocksAsync } = await import("../prompts/responses")
+		let imageBlocks: Anthropic.ImageBlockParam[] = await formatImagesIntoBlocksAsync(images)
 
 		// Task starting
 
@@ -1480,7 +1482,10 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 		}
 
 		if (responseImages && responseImages.length > 0) {
-			newUserContent.push(...formatResponse.imageBlocks(responseImages))
+			// Convert webview URIs to base64 for backend storage
+			const { formatImagesIntoBlocksAsync } = await import("../prompts/responses")
+			const responseImageBlocks = await formatImagesIntoBlocksAsync(responseImages)
+			newUserContent.push(...responseImageBlocks)
 		}
 
 		// Ensure we have at least some content to send to the API.
diff --git a/src/integrations/misc/__tests__/imageDataUrl.spec.ts b/src/integrations/misc/__tests__/imageDataUrl.spec.ts
new file mode 100644
index 000000000000..4993303034fc
--- /dev/null
+++ b/src/integrations/misc/__tests__/imageDataUrl.spec.ts
@@ -0,0 +1,63 @@
+import { describe, it, expect, vi, beforeEach } from "vitest"
+import { normalizeImageRefsToDataUrls } from "../imageDataUrl"
+import * as fs from "fs/promises"
+
+// Mock fs module
+vi.mock("fs/promises")
+
+describe("normalizeImageRefsToDataUrls", () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+	})
+
+	it("should pass through data URLs unchanged", async () => {
+		const dataUrl =
+			"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=="
+		const result = await normalizeImageRefsToDataUrls([dataUrl])
+
+		expect(result).toEqual([dataUrl])
+	})
+
+	it("should convert webview URIs to data URLs", async () => {
+		const webviewUri = "file:///path/to/test.png"
+		const mockBuffer = Buffer.from("test image data")
+
+		vi.mocked(fs.readFile).mockResolvedValue(mockBuffer)
+
+		const result = await normalizeImageRefsToDataUrls([webviewUri])
+
+		expect(result).toHaveLength(1)
+		expect(result[0]).toMatch(/^data:image\/png;base64,/)
+		expect(fs.readFile).toHaveBeenCalledWith("/path/to/test.png")
+	})
+
+	it("should handle mixed arrays of data URLs and webview URIs", async () => {
+		const dataUrl = "data:image/jpeg;base64,test123"
+		const webviewUri = "file:///path/to/test.png"
+		const mockBuffer = Buffer.from("test image data")
+
+		vi.mocked(fs.readFile).mockResolvedValue(mockBuffer)
+
+		const result = await normalizeImageRefsToDataUrls([dataUrl, webviewUri])
+
+		expect(result).toHaveLength(2)
+		expect(result[0]).toBe(dataUrl) // Data URL unchanged
+		expect(result[1]).toMatch(/^data:image\/png;base64,/) // Webview URI converted
+	})
+
+	it("should handle errors gracefully by skipping problematic images", async () => {
+		const validDataUrl = "data:image/png;base64,valid"
+		const invalidWebviewUri = "file:///nonexistent/test.png"
+
+		vi.mocked(fs.readFile).mockRejectedValue(new Error("File not found"))
+
+		const result = await normalizeImageRefsToDataUrls([validDataUrl, invalidWebviewUri])
+
+		expect(result).toEqual([validDataUrl]) // Only valid ones returned
+	})
+
+	it("should handle empty arrays", async () => {
+		const result = await normalizeImageRefsToDataUrls([])
+		expect(result).toEqual([])
+	})
+})
diff --git a/src/integrations/misc/imageDataUrl.ts b/src/integrations/misc/imageDataUrl.ts
new file mode 100644
index 000000000000..354385eb9e7c
--- /dev/null
+++ b/src/integrations/misc/imageDataUrl.ts
@@ -0,0 +1,94 @@
+import * as fs from "fs/promises"
+import * as path from "path"
+
+/**
+ * Converts webview URIs to base64 data URLs for API calls.
+ * This is the missing piece from PR #8225 that allows webview URIs
+ * to be used in frontend while converting to base64 for API calls.
+ */
+export async function normalizeImageRefsToDataUrls(imageRefs: string[]): Promise<string[]> {
+	const results: string[] = []
+
+	for (const imageRef of imageRefs) {
+		// If it's already a data URL, keep it as is
+		if (imageRef.startsWith("data:image/")) {
+			results.push(imageRef)
+			continue
+		}
+
+		// Convert webview URI to file path and then to base64
+		try {
+			const filePath = webviewUriToFilePath(imageRef)
+			const buffer = await fs.readFile(filePath)
+			const base64 = buffer.toString("base64")
+			const mimeType = getMimeTypeFromPath(filePath)
+			const dataUrl = `data:${mimeType};base64,${base64}`
+			results.push(dataUrl)
+		} catch (error) {
+			console.error("Failed to convert webview URI to base64:", imageRef, error)
+			// Skip this image
+		}
+	}
+
+	return results
+}
+
+/**
+ * Converts a webview URI to a file system path
+ */
+function webviewUriToFilePath(webviewUri: string): string {
+	// Handle vscode-resource URIs like:
+	// vscode-resource://vscode-webview/path/to/file
+	if (webviewUri.includes("vscode-resource://")) {
+		// Extract the path portion after vscode-resource://vscode-webview/
+		const match = webviewUri.match(/vscode-resource:\/\/[^\/]+(.+)/)
+		if (match) {
+			return decodeURIComponent(match[1])
+		}
+	}
+
+	// Handle file:// URIs
+	if (webviewUri.startsWith("file://")) {
+		return decodeURIComponent(webviewUri.substring(7))
+	}
+
+	// Handle VS Code webview URIs that contain encoded paths
+	if (webviewUri.includes("vscode-userdata") || webviewUri.includes("vscode-cdn.net")) {
+		// Try to decode the URI and extract the file path
+		const decoded = decodeURIComponent(webviewUri)
+		// Look for a file path pattern in the decoded URI
+		const pathMatch = decoded.match(/(?:Users|C:)([^?#]+\.(?:png|jpg|jpeg|gif|webp))/i)
+		if (pathMatch) {
+			const extractedPath = pathMatch[0]
+			return extractedPath
+		}
+	}
+
+	// As a last resort, try treating it as a file path
+	return webviewUri
+}
+
+/**
+ * Gets the MIME type from a file path
+ */
+function getMimeTypeFromPath(filePath: string): string {
+	const ext = path.extname(filePath).toLowerCase()
+
+	switch (ext) {
+		case ".png":
+			return "image/png"
+		case ".jpg":
+		case ".jpeg":
+			return "image/jpeg"
+		case ".gif":
+			return "image/gif"
+		case ".webp":
+			return "image/webp"
+		case ".svg":
+			return "image/svg+xml"
+		case ".bmp":
+			return "image/bmp"
+		default:
+			return "image/png"
+	}
+}

From 32b708592de06ed6384855d57f4f4bc2c15d8a9a Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Mon, 27 Oct 2025 13:42:41 -0500
Subject: [PATCH 06/20] optimize: implement efficient approach for PR #8225 -
 store base64 directly in backend messages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove unnecessary memory caching logic
- Store base64 data URLs directly in ClineMessage.images[] and ApiMessage content when first received
- Eliminate conversion overhead at API call time (base64 already available)
- Keep frontend memory efficient with webview URIs for display
- Much simpler and more efficient than caching approach
- One-time conversion: webview URI → base64 when storing in backend
- API calls use pre-stored base64 directly (no file I/O or conversion needed)

This achieves PR goals with optimal performance: frontend memory efficiency + instant API calls
---
 src/core/prompts/responses.ts         | 18 ------------------
 src/core/task/Task.ts                 | 23 +++++++++++++++--------
 src/integrations/misc/imageDataUrl.ts |  1 +
 3 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/src/core/prompts/responses.ts b/src/core/prompts/responses.ts
index 980c70c4dd62..fd51b18feda4 100644
--- a/src/core/prompts/responses.ts
+++ b/src/core/prompts/responses.ts
@@ -3,7 +3,6 @@ import * as path from "path"
 import * as diff from "diff"
 import { RooIgnoreController, LOCK_TEXT_SYMBOL } from "../ignore/RooIgnoreController"
 import { RooProtectedController } from "../protect/RooProtectedController"
-import { normalizeImageRefsToDataUrls } from "../../integrations/misc/imageDataUrl"
 
 export const formatResponse = {
 	toolDenied: () => `The user denied this operation.`,
@@ -201,23 +200,6 @@ const formatImagesIntoBlocks = (images?: string[]): Anthropic.ImageBlockParam[]
 		: []
 }
 
-/**
- * Async version that converts webview URIs to base64 data URLs before creating image blocks
- * This is the missing piece from PR #8225 - allows frontend to use webview URIs while
- * backend stores base64 for API calls.
- */
-export const formatImagesIntoBlocksAsync = async (images?: string[]): Promise<Anthropic.ImageBlockParam[]> => {
-	if (!images || images.length === 0) {
-		return []
-	}
-
-	// Convert any webview URIs to base64 data URLs
-	const dataUrls = await normalizeImageRefsToDataUrls(images)
-
-	// Now use the regular function to create image blocks
-	return formatImagesIntoBlocks(dataUrls)
-}
-
 const toolUseInstructionsReminder = `# Reminder: Instructions for Tool Use
 
 Tool uses are formatted using XML-style tags. The tool name itself becomes the XML tag name. Each parameter is enclosed within its own set of tags. Here's the structure:
diff --git a/src/core/task/Task.ts b/src/core/task/Task.ts
index 2ae6f694ecba..3a83edc7e6cd 100644
--- a/src/core/task/Task.ts
+++ b/src/core/task/Task.ts
@@ -1212,15 +1212,18 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 
 		await this.providerRef.deref()?.postStateToWebview()
 
-		await this.say("text", task, images)
+		// Convert webview URIs to base64 data URLs for backend storage (one-time conversion)
+		const { normalizeImageRefsToDataUrls } = await import("../../integrations/misc/imageDataUrl")
+		const base64Images = images ? await normalizeImageRefsToDataUrls(images) : undefined
+
+		await this.say("text", task, base64Images) // Store base64 in backend messages
 		this.isInitialized = true
 
-		// Convert webview URIs to base64 for backend storage
-		const { formatImagesIntoBlocksAsync } = await import("../prompts/responses")
-		let imageBlocks: Anthropic.ImageBlockParam[] = await formatImagesIntoBlocksAsync(images)
+		// Convert base64 to image blocks for API (no conversion needed, already base64)
+		const { formatResponse } = await import("../prompts/responses")
+		let imageBlocks: Anthropic.ImageBlockParam[] = formatResponse.imageBlocks(base64Images)
 
 		// Task starting
-
 		await this.initiateTaskLoop([
 			{
 				type: "text",
@@ -1482,9 +1485,13 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 		}
 
 		if (responseImages && responseImages.length > 0) {
-			// Convert webview URIs to base64 for backend storage
-			const { formatImagesIntoBlocksAsync } = await import("../prompts/responses")
-			const responseImageBlocks = await formatImagesIntoBlocksAsync(responseImages)
+			// Convert webview URIs to base64 data URLs for backend storage (one-time conversion)
+			const { normalizeImageRefsToDataUrls } = await import("../../integrations/misc/imageDataUrl")
+			const base64ResponseImages = await normalizeImageRefsToDataUrls(responseImages)
+
+			// Convert base64 to image blocks for API (no conversion needed, already base64)
+			const { formatResponse } = await import("../prompts/responses")
+			const responseImageBlocks = formatResponse.imageBlocks(base64ResponseImages)
 			newUserContent.push(...responseImageBlocks)
 		}
 
diff --git a/src/integrations/misc/imageDataUrl.ts b/src/integrations/misc/imageDataUrl.ts
index 354385eb9e7c..17ded42d1493 100644
--- a/src/integrations/misc/imageDataUrl.ts
+++ b/src/integrations/misc/imageDataUrl.ts
@@ -3,6 +3,7 @@ import * as path from "path"
 
 /**
  * Converts webview URIs to base64 data URLs for API calls.
+ * Simple fallback for cases where base64 isn't already stored in messages.
  * This is the missing piece from PR #8225 that allows webview URIs
  * to be used in frontend while converting to base64 for API calls.
  */

From 7029f1d6f819b4389e096d889235065f0adac59b Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Mon, 27 Oct 2025 14:24:06 -0500
Subject: [PATCH 07/20] security: fix polynomial regex and improve URL
 sanitization in imageDataUrl.ts

- Replace potentially polynomial regex /(?:Users|C:)([^?#]+\.(?:png|jpg|jpeg|gif|webp))/i
- Split into separate bounded patterns for Unix and Windows paths
- Add length limit {0,500} to prevent ReDoS attacks
- Improve URL substring sanitization for vscode-userdata and vscode-cdn.net URIs
- Addresses GitHub CodeQL security warnings for polynomial regex vulnerability
---
 src/integrations/misc/imageDataUrl.ts | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/integrations/misc/imageDataUrl.ts b/src/integrations/misc/imageDataUrl.ts
index 17ded42d1493..0f88ce9ef301 100644
--- a/src/integrations/misc/imageDataUrl.ts
+++ b/src/integrations/misc/imageDataUrl.ts
@@ -57,11 +57,18 @@ function webviewUriToFilePath(webviewUri: string): string {
 	if (webviewUri.includes("vscode-userdata") || webviewUri.includes("vscode-cdn.net")) {
 		// Try to decode the URI and extract the file path
 		const decoded = decodeURIComponent(webviewUri)
-		// Look for a file path pattern in the decoded URI
-		const pathMatch = decoded.match(/(?:Users|C:)([^?#]+\.(?:png|jpg|jpeg|gif|webp))/i)
+
+		// Use safer, non-polynomial regex patterns
+		// Look for Unix-style paths first
+		let pathMatch = decoded.match(/\/Users\/[^?#]*\.(?:png|jpg|jpeg|gif|webp)/i)
+		if (pathMatch) {
+			return pathMatch[0]
+		}
+
+		// Look for Windows-style paths with bounded length to prevent polynomial behavior
+		pathMatch = decoded.match(/C:\\[^?#]{0,500}\.(?:png|jpg|jpeg|gif|webp)/i)
 		if (pathMatch) {
-			const extractedPath = pathMatch[0]
-			return extractedPath
+			return pathMatch[0]
 		}
 	}
 

From a1c402e77bf6eeee34366c8d4d7aac9dfad6fa74 Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Mon, 27 Oct 2025 14:26:28 -0500
Subject: [PATCH 08/20] security: harden URL parsing against ReDoS and
 injection attacks

- Add strict prefix validation: require vscode-resource://vscode-webview/ prefix
- Add URI length limits (max 2048 chars) to prevent DoS
- Replace potentially vulnerable regex with bounded, anchored patterns
- Use ^ and $ anchors to prevent partial matches
- Limit character classes to prevent backtracking (e.g., [a-zA-Z0-9._-]{1,50})
- Add proper error handling for decode failures
- Addresses CodeQL warnings for polynomial regex and incomplete URL sanitization
---
 src/integrations/misc/imageDataUrl.ts | 39 ++++++++++++++++++---------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/integrations/misc/imageDataUrl.ts b/src/integrations/misc/imageDataUrl.ts
index 0f88ce9ef301..39eaa3e09f5d 100644
--- a/src/integrations/misc/imageDataUrl.ts
+++ b/src/integrations/misc/imageDataUrl.ts
@@ -54,21 +54,34 @@ function webviewUriToFilePath(webviewUri: string): string {
 	}
 
 	// Handle VS Code webview URIs that contain encoded paths
-	if (webviewUri.includes("vscode-userdata") || webviewUri.includes("vscode-cdn.net")) {
-		// Try to decode the URI and extract the file path
-		const decoded = decodeURIComponent(webviewUri)
+	// Use strict prefix matching to prevent arbitrary host injection
+	if (
+		webviewUri.startsWith("vscode-resource://vscode-webview/") &&
+		(webviewUri.includes("vscode-userdata") || webviewUri.includes("vscode-cdn.net"))
+	) {
+		try {
+			// Decode safely with length limits
+			if (webviewUri.length > 2048) {
+				throw new Error("URI too long")
+			}
 
-		// Use safer, non-polynomial regex patterns
-		// Look for Unix-style paths first
-		let pathMatch = decoded.match(/\/Users\/[^?#]*\.(?:png|jpg|jpeg|gif|webp)/i)
-		if (pathMatch) {
-			return pathMatch[0]
-		}
+			const decoded = decodeURIComponent(webviewUri)
 
-		// Look for Windows-style paths with bounded length to prevent polynomial behavior
-		pathMatch = decoded.match(/C:\\[^?#]{0,500}\.(?:png|jpg|jpeg|gif|webp)/i)
-		if (pathMatch) {
-			return pathMatch[0]
+			// Use specific, bounded patterns to prevent ReDoS
+			// Match exact patterns without backtracking
+			const unixMatch = decoded.match(
+				/^[^?#]*\/Users\/[a-zA-Z0-9._-]{1,50}\/[^?#]{1,300}\.(png|jpg|jpeg|gif|webp)$/i,
+			)
+			if (unixMatch) {
+				return unixMatch[0]
+			}
+
+			const windowsMatch = decoded.match(/^[^?#]*C:\\[a-zA-Z0-9._\\-]{1,300}\.(png|jpg|jpeg|gif|webp)$/i)
+			if (windowsMatch) {
+				return windowsMatch[0]
+			}
+		} catch (error) {
+			console.error("Failed to decode webview URI:", error)
 		}
 	}
 

From 3d796de327664e26a67604e2188afe6fcf8ec459 Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Mon, 27 Oct 2025 14:33:42 -0500
Subject: [PATCH 09/20] security: fix host injection vulnerability in URL
 validation

- Replace dangerous substring check webviewUri.includes('vscode-cdn.net')
- Add proper URL host validation using URL constructor
- Check url.host === 'vscode-cdn.net' to prevent injection via paths/queries
- Graceful fallback when URL parsing fails
- Addresses final CodeQL warning for incomplete URL substring sanitization
---
 src/integrations/misc/imageDataUrl.ts | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/integrations/misc/imageDataUrl.ts b/src/integrations/misc/imageDataUrl.ts
index 39eaa3e09f5d..9aaccc461a21 100644
--- a/src/integrations/misc/imageDataUrl.ts
+++ b/src/integrations/misc/imageDataUrl.ts
@@ -57,7 +57,7 @@ function webviewUriToFilePath(webviewUri: string): string {
 	// Use strict prefix matching to prevent arbitrary host injection
 	if (
 		webviewUri.startsWith("vscode-resource://vscode-webview/") &&
-		(webviewUri.includes("vscode-userdata") || webviewUri.includes("vscode-cdn.net"))
+		(webviewUri.includes("vscode-userdata") || isValidVsCodeCdnHost(webviewUri))
 	) {
 		try {
 			// Decode safely with length limits
@@ -92,6 +92,20 @@ function webviewUriToFilePath(webviewUri: string): string {
 /**
  * Gets the MIME type from a file path
  */
+/**
+ * Safely validates if a webview URI is from the trusted vscode-cdn.net host
+ * Prevents host injection attacks by properly parsing the URL
+ */
+function isValidVsCodeCdnHost(webviewUri: string): boolean {
+	try {
+		const url = new URL(webviewUri)
+		return url.host === "vscode-cdn.net"
+	} catch {
+		// URL parsing failed - not a valid URL
+		return false
+	}
+}
+
 function getMimeTypeFromPath(filePath: string): string {
 	const ext = path.extname(filePath).toLowerCase()
 

From 9dc853cf7fd80cdb015fdf7b85ccd333fb631c0c Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Mon, 27 Oct 2025 19:30:16 -0500
Subject: [PATCH 10/20] feat(images): persist base64 in backend messages;
 normalize URIs once at ingestion; support VS Code CDN webview URLs in
 normalization

---
 src/core/task/Task.ts                 | 26 +++++++++++++++++++++++++-
 src/integrations/misc/imageDataUrl.ts | 18 ++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/core/task/Task.ts b/src/core/task/Task.ts
index 3a83edc7e6cd..b571c180dae6 100644
--- a/src/core/task/Task.ts
+++ b/src/core/task/Task.ts
@@ -872,7 +872,21 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 			throw new Error("Current ask promise was ignored")
 		}
 
-		const result = { response: this.askResponse!, text: this.askResponseText, images: this.askResponseImages }
+		let result: { response: ClineAskResponse; text?: string; images?: string[] } = {
+			response: this.askResponse!,
+			text: this.askResponseText,
+			images: this.askResponseImages,
+		}
+		// Normalize any image refs to base64 data URLs before handing back to callers
+		if (Array.isArray(result.images) && result.images.length > 0) {
+			try {
+				const { normalizeImageRefsToDataUrls } = await import("../../integrations/misc/imageDataUrl")
+				const normalized = await normalizeImageRefsToDataUrls(result.images)
+				result.images = normalized
+			} catch (e) {
+				console.error("[Task#ask] Failed to normalize image refs:", e)
+			}
+		}
 		this.askResponse = undefined
 		this.askResponseText = undefined
 		this.askResponseImages = undefined
@@ -1070,6 +1084,16 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 			throw new Error(`[RooCode#say] task ${this.taskId}.${this.instanceId} aborted`)
 		}
 
+		// Ensure any image refs are normalized to base64 data URLs before persisting or sending to APIs
+		if (Array.isArray(images) && images.length > 0) {
+			try {
+				const { normalizeImageRefsToDataUrls } = await import("../../integrations/misc/imageDataUrl")
+				images = await normalizeImageRefsToDataUrls(images)
+			} catch (e) {
+				console.error("[Task#say] Failed to normalize image refs:", e)
+			}
+		}
+
 		if (partial !== undefined) {
 			const lastMessage = this.clineMessages.at(-1)
 
diff --git a/src/integrations/misc/imageDataUrl.ts b/src/integrations/misc/imageDataUrl.ts
index 9aaccc461a21..bd8f14c14bad 100644
--- a/src/integrations/misc/imageDataUrl.ts
+++ b/src/integrations/misc/imageDataUrl.ts
@@ -38,6 +38,24 @@ export async function normalizeImageRefsToDataUrls(imageRefs: string[]): Promise
  * Converts a webview URI to a file system path
  */
 function webviewUriToFilePath(webviewUri: string): string {
+	// Handle VS Code CDN-style webview URLs:
+	// Example: https://file+.vscode-resource.vscode-cdn.net/file/<absolute_path_to_image>
+	if (webviewUri.startsWith("https://")) {
+		try {
+			const u = new URL(webviewUri)
+			if (u.host === "vscode-cdn.net" || u.host.endsWith(".vscode-cdn.net")) {
+				// Path is like /file/<abs-path> - strip the /file/ prefix
+				let p = u.pathname || ""
+				if (p.startsWith("/file/")) {
+					p = p.slice("/file/".length)
+				}
+				return path.normalize(decodeURIComponent(p))
+			}
+		} catch {
+			// fall through if not a valid URL or not the expected host
+		}
+	}
+
 	// Handle vscode-resource URIs like:
 	// vscode-resource://vscode-webview/path/to/file
 	if (webviewUri.includes("vscode-resource://")) {

From 634ee677d9454e1328d03bc67f5d55154cb91c4b Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Mon, 27 Oct 2025 20:30:25 -0500
Subject: [PATCH 11/20] fix(image-uris): resolve review-bot issues

ClineProvider.convertToWebviewUri: align JSDoc with non-throwing behavior and fallback to file URI.

imageDataUrl.webviewUriToFilePath: remove impossible CDN host check from vscode-resource branch; expand Windows path regex to allow spaces while keeping bounds.

ChatTextArea: clear pendingImageUploadsRef via captured ref in cleanup to avoid stale closure.
---
 src/core/webview/ClineProvider.ts             |  8 +++-----
 src/integrations/misc/imageDataUrl.ts         | 20 ++-----------------
 .../src/components/chat/ChatTextArea.tsx      |  9 +++++++++
 3 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/core/webview/ClineProvider.ts b/src/core/webview/ClineProvider.ts
index 1e866b2aa97d..81de590a53c4 100644
--- a/src/core/webview/ClineProvider.ts
+++ b/src/core/webview/ClineProvider.ts
@@ -2790,13 +2790,11 @@ export class ClineProvider
 	}
 
 	/**
-	 * Convert a file path to a webview-accessible URI
-	 * This method safely converts file paths to URIs that can be loaded in the webview
+	 * Convert a file path to a webview-accessible URI.
+	 * Safely returns a string and does not throw; logs errors and falls back to a file: URI when conversion is not possible.
 	 *
 	 * @param filePath - The absolute file path to convert
-	 * @returns The webview URI string, or the original file URI if conversion fails
-	 * @throws {Error} When webview is not available
-	 * @throws {TypeError} When file path is invalid
+	 * @returns The webview URI string when a webview is available; otherwise a file: URI string
 	 */
 	public convertToWebviewUri(filePath: string): string {
 		try {
diff --git a/src/integrations/misc/imageDataUrl.ts b/src/integrations/misc/imageDataUrl.ts
index bd8f14c14bad..b747d665bcf9 100644
--- a/src/integrations/misc/imageDataUrl.ts
+++ b/src/integrations/misc/imageDataUrl.ts
@@ -73,10 +73,7 @@ function webviewUriToFilePath(webviewUri: string): string {
 
 	// Handle VS Code webview URIs that contain encoded paths
 	// Use strict prefix matching to prevent arbitrary host injection
-	if (
-		webviewUri.startsWith("vscode-resource://vscode-webview/") &&
-		(webviewUri.includes("vscode-userdata") || isValidVsCodeCdnHost(webviewUri))
-	) {
+	if (webviewUri.startsWith("vscode-resource://vscode-webview/") && webviewUri.includes("vscode-userdata")) {
 		try {
 			// Decode safely with length limits
 			if (webviewUri.length > 2048) {
@@ -94,7 +91,7 @@ function webviewUriToFilePath(webviewUri: string): string {
 				return unixMatch[0]
 			}
 
-			const windowsMatch = decoded.match(/^[^?#]*C:\\[a-zA-Z0-9._\\-]{1,300}\.(png|jpg|jpeg|gif|webp)$/i)
+			const windowsMatch = decoded.match(/^[^?#]*[A-Za-z]:\\[^?#]{1,300}\.(png|jpg|jpeg|gif|webp)$/i)
 			if (windowsMatch) {
 				return windowsMatch[0]
 			}
@@ -110,19 +107,6 @@ function webviewUriToFilePath(webviewUri: string): string {
 /**
  * Gets the MIME type from a file path
  */
-/**
- * Safely validates if a webview URI is from the trusted vscode-cdn.net host
- * Prevents host injection attacks by properly parsing the URL
- */
-function isValidVsCodeCdnHost(webviewUri: string): boolean {
-	try {
-		const url = new URL(webviewUri)
-		return url.host === "vscode-cdn.net"
-	} catch {
-		// URL parsing failed - not a valid URL
-		return false
-	}
-}
 
 function getMimeTypeFromPath(filePath: string): string {
 	const ext = path.extname(filePath).toLowerCase()
diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx
index f35dce09120e..05069bf6eb98 100644
--- a/webview-ui/src/components/chat/ChatTextArea.tsx
+++ b/webview-ui/src/components/chat/ChatTextArea.tsx
@@ -652,6 +652,15 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 		// This ensures the frontend never retains image data URLs
 		const pendingImageUploadsRef = useRef<Set<string>>(new Set())
 
+		// Cleanup pending uploads on unmount to prevent leaks
+		useEffect(() => {
+			// Capture ref value to avoid stale closure
+			const uploads = pendingImageUploadsRef.current
+			return () => {
+				uploads.clear()
+			}
+		}, [])
+
 		const handlePaste = useCallback(
 			async (e: React.ClipboardEvent) => {
 				const items = e.clipboardData.items

From 5d3f45bec05706eebce7978f506696d990920c44 Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Mon, 27 Oct 2025 20:46:27 -0500
Subject: [PATCH 12/20] fix(image-uris): broaden Unix path regex to include
 common Linux roots

Use /^[^?#]*\/(?:Users|home|root|var|tmp|opt)\/[^?#]{1,300}\.(png|jpg|jpeg|gif|webp)$/i to support Linux/macOS while keeping bounds and avoiding backtracking.
---
 src/integrations/misc/imageDataUrl.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/integrations/misc/imageDataUrl.ts b/src/integrations/misc/imageDataUrl.ts
index b747d665bcf9..217980288181 100644
--- a/src/integrations/misc/imageDataUrl.ts
+++ b/src/integrations/misc/imageDataUrl.ts
@@ -85,7 +85,7 @@ function webviewUriToFilePath(webviewUri: string): string {
 			// Use specific, bounded patterns to prevent ReDoS
 			// Match exact patterns without backtracking
 			const unixMatch = decoded.match(
-				/^[^?#]*\/Users\/[a-zA-Z0-9._-]{1,50}\/[^?#]{1,300}\.(png|jpg|jpeg|gif|webp)$/i,
+				/^[^?#]*\/(?:Users|home|root|var|tmp|opt)\/[^?#]{1,300}\.(png|jpg|jpeg|gif|webp)$/i,
 			)
 			if (unixMatch) {
 				return unixMatch[0]

From 1c7700eb699b3cad3a68f0d3002a623c82ec61de Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Tue, 28 Oct 2025 11:33:08 -0500
Subject: [PATCH 13/20] feat(images): enforce 10MB limit UI+backend; reuse
 original base64 via cache to avoid re-encoding

UI: early-reject >10MB in ChatTextArea paste/drop handlers. Backend: validate >10MB in savePastedImageToTemp(). Cache base64 mapped to file path and consume in normalizeImageRefsToDataUrls() to avoid re-encoding UI-pasted images.
---
 src/integrations/misc/image-cache.ts          | 94 +++++++++++++++++++
 src/integrations/misc/image-handler.ts        | 14 +++
 src/integrations/misc/imageDataUrl.ts         | 56 ++---------
 .../src/components/chat/ChatTextArea.tsx      | 30 +++++-
 4 files changed, 146 insertions(+), 48 deletions(-)
 create mode 100644 src/integrations/misc/image-cache.ts

diff --git a/src/integrations/misc/image-cache.ts b/src/integrations/misc/image-cache.ts
new file mode 100644
index 000000000000..2df5f8575837
--- /dev/null
+++ b/src/integrations/misc/image-cache.ts
@@ -0,0 +1,94 @@
+/**
+ * Transient in-memory cache mapping image file paths to their base64 data URLs.
+ * - Enforces per-entry max size (10MB)
+ * - TTL eviction to avoid leaks
+ * - Used to avoid re-reading files for images that originated as base64 from UI
+ */
+
+type ImageCacheEntry = {
+	dataUrl: string
+	size: number // raw bytes (approx from base64)
+	ts: number // insertion timestamp
+}
+
+const CACHE = new Map<string, ImageCacheEntry>()
+
+// 10 MB limit per image
+const MAX_ENTRY_BYTES = 10 * 1024 * 1024
+// 10 minutes TTL
+const TTL_MS = 10 * 60 * 1000
+// Soft cap to prevent unbounded growth
+const MAX_ENTRIES = 500
+
+/** Approximate raw bytes for a base64 string (excluding data: header) */
+function estimateBytesFromBase64(base64: string): number {
+	// Remove padding characters for estimation (not strictly required)
+	const cleaned = base64.replace(/=+$/, "")
+	// 4 base64 chars represent 3 bytes => bytes ≈ floor(len * 3 / 4)
+	return Math.floor((cleaned.length * 3) / 4)
+}
+
+function purgeExpired(now = Date.now()) {
+	for (const [k, v] of CACHE) {
+		if (now - v.ts > TTL_MS) {
+			CACHE.delete(k)
+		}
+	}
+	// Simple size cap: if still too large, drop oldest
+	if (CACHE.size > MAX_ENTRIES) {
+		const entries = Array.from(CACHE.entries()).sort((a, b) => a[1].ts - b[1].ts)
+		const toDrop = CACHE.size - MAX_ENTRIES
+		for (let i = 0; i < toDrop; i++) {
+			CACHE.delete(entries[i][0])
+		}
+	}
+}
+
+/**
+ * Store a data URL for a file path (returns false if rejected by size limits)
+ */
+export function setImageBase64ForPath(filePath: string, dataUrl: string): boolean {
+	try {
+		const commaIdx = dataUrl.indexOf(",")
+		if (commaIdx === -1) return false
+		const base64 = dataUrl.slice(commaIdx + 1)
+		const size = estimateBytesFromBase64(base64)
+
+		if (size > MAX_ENTRY_BYTES) {
+			// Too large; do not cache
+			return false
+		}
+
+		purgeExpired()
+		CACHE.set(filePath, { dataUrl, size, ts: Date.now() })
+		return true
+	} catch {
+		return false
+	}
+}
+
+/**
+ * Retrieve a cached data URL if present and not expired
+ */
+export function getImageBase64ForPath(filePath: string): string | undefined {
+	purgeExpired()
+	const entry = CACHE.get(filePath)
+	if (!entry) return undefined
+	return entry.dataUrl
+}
+
+/** Remove a single path from cache */
+export function clearImageForPath(filePath: string): void {
+	CACHE.delete(filePath)
+}
+
+/** Clear entire cache */
+export function clearImageCache(): void {
+	CACHE.clear()
+}
+
+/** Expose limits for callers that want to validate before calling set() */
+export const IMAGE_CACHE_LIMITS = {
+	MAX_ENTRY_BYTES,
+	TTL_MS,
+}
diff --git a/src/integrations/misc/image-handler.ts b/src/integrations/misc/image-handler.ts
index f66c5a31237d..49ab72b23835 100644
--- a/src/integrations/misc/image-handler.ts
+++ b/src/integrations/misc/image-handler.ts
@@ -4,6 +4,8 @@ import * as vscode from "vscode"
 import * as fs from "fs/promises"
 import { getWorkspacePath } from "../../utils/path"
 import { t } from "../../i18n"
+const MAX_IMAGE_BYTES = 10 * 1024 * 1024
+import { setImageBase64ForPath } from "./image-cache"
 
 export async function openImage(dataUriOrPath: string, options?: { values?: { action?: string } }) {
 	// Minimal handling for VS Code webview CDN URLs:
@@ -187,6 +189,14 @@ export async function savePastedImageToTemp(
 	}
 
 	const [, format, base64Data] = matches
+	// Enforce a 10MB/image limit (approximate from base64 length)
+	{
+		const approxBytes = Math.floor((base64Data.replace(/=+$/, "").length * 3) / 4)
+		if (approxBytes > MAX_IMAGE_BYTES) {
+			console.error("Pasted image exceeds 10MB limit")
+			return null
+		}
+	}
 	const imageBuffer = Buffer.from(base64Data, "base64")
 
 	// Determine storage directory
@@ -223,6 +233,10 @@ export async function savePastedImageToTemp(
 		// Write the image to the file
 		await fs.writeFile(imagePath, imageBuffer)
 
+		// Since this image originated as base64 from the UI, cache the dataUrl to avoid future re-encoding
+		// Reconstruct the full data URL using the original input
+		setImageBase64ForPath(imagePath, dataUri)
+
 		// Convert to webview URI if provider is available
 		let imageUri = provider?.convertToWebviewUri?.(imagePath) ?? vscode.Uri.file(imagePath).toString()
 
diff --git a/src/integrations/misc/imageDataUrl.ts b/src/integrations/misc/imageDataUrl.ts
index 217980288181..42d93606f70b 100644
--- a/src/integrations/misc/imageDataUrl.ts
+++ b/src/integrations/misc/imageDataUrl.ts
@@ -1,5 +1,6 @@
 import * as fs from "fs/promises"
 import * as path from "path"
+import { getImageBase64ForPath } from "./image-cache"
 
 /**
  * Converts webview URIs to base64 data URLs for API calls.
@@ -20,6 +21,14 @@ export async function normalizeImageRefsToDataUrls(imageRefs: string[]): Promise
 		// Convert webview URI to file path and then to base64
 		try {
 			const filePath = webviewUriToFilePath(imageRef)
+
+			// If the image originated from the UI as base64 and was cached, use it to avoid re-encoding
+			const cached = getImageBase64ForPath(filePath)
+			if (cached) {
+				results.push(cached)
+				continue
+			}
+
 			const buffer = await fs.readFile(filePath)
 			const base64 = buffer.toString("base64")
 			const mimeType = getMimeTypeFromPath(filePath)
@@ -52,54 +61,9 @@ function webviewUriToFilePath(webviewUri: string): string {
 				return path.normalize(decodeURIComponent(p))
 			}
 		} catch {
-			// fall through if not a valid URL or not the expected host
-		}
-	}
-
-	// Handle vscode-resource URIs like:
-	// vscode-resource://vscode-webview/path/to/file
-	if (webviewUri.includes("vscode-resource://")) {
-		// Extract the path portion after vscode-resource://vscode-webview/
-		const match = webviewUri.match(/vscode-resource:\/\/[^\/]+(.+)/)
-		if (match) {
-			return decodeURIComponent(match[1])
-		}
-	}
-
-	// Handle file:// URIs
-	if (webviewUri.startsWith("file://")) {
-		return decodeURIComponent(webviewUri.substring(7))
-	}
-
-	// Handle VS Code webview URIs that contain encoded paths
-	// Use strict prefix matching to prevent arbitrary host injection
-	if (webviewUri.startsWith("vscode-resource://vscode-webview/") && webviewUri.includes("vscode-userdata")) {
-		try {
-			// Decode safely with length limits
-			if (webviewUri.length > 2048) {
-				throw new Error("URI too long")
-			}
-
-			const decoded = decodeURIComponent(webviewUri)
-
-			// Use specific, bounded patterns to prevent ReDoS
-			// Match exact patterns without backtracking
-			const unixMatch = decoded.match(
-				/^[^?#]*\/(?:Users|home|root|var|tmp|opt)\/[^?#]{1,300}\.(png|jpg|jpeg|gif|webp)$/i,
-			)
-			if (unixMatch) {
-				return unixMatch[0]
-			}
-
-			const windowsMatch = decoded.match(/^[^?#]*[A-Za-z]:\\[^?#]{1,300}\.(png|jpg|jpeg|gif|webp)$/i)
-			if (windowsMatch) {
-				return windowsMatch[0]
-			}
-		} catch (error) {
-			console.error("Failed to decode webview URI:", error)
+			throw new Error("Invalid URL")
 		}
 	}
-
 	// As a last resort, try treating it as a file path
 	return webviewUri
 }
diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx
index 05069bf6eb98..63e1fd4a0ab9 100644
--- a/webview-ui/src/components/chat/ChatTextArea.tsx
+++ b/webview-ui/src/components/chat/ChatTextArea.tsx
@@ -730,8 +730,21 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					const dataUrls = imageDataArray.filter((dataUrl): dataUrl is string => dataUrl !== null)
 
 					if (dataUrls.length > 0) {
-						// Process each image: send to backend to save as temp file
+						// Process each image: enforce 10MB limit and send to backend to save as temp file
 						for (const dataUrl of dataUrls) {
+							// Approximate bytes from base64 (ignore header and padding)
+							const commaIdx = dataUrl.indexOf(",")
+							let tooLarge = false
+							if (commaIdx !== -1) {
+								const base64 = dataUrl.slice(commaIdx + 1).replace(/=+$/, "")
+								const approxBytes = Math.floor((base64.length * 3) / 4)
+								if (approxBytes > 10 * 1024 * 1024) {
+									console.warn("Pasted image exceeds 10MB; skipping")
+									tooLarge = true
+								}
+							}
+							if (tooLarge) continue
+
 							const requestId = Math.random().toString(36).substring(2, 9)
 
 							// Track request ID only; never store base64
@@ -895,8 +908,21 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						const dataUrls = imageDataArray.filter((dataUrl): dataUrl is string => dataUrl !== null)
 
 						if (dataUrls.length > 0) {
-							// Process each dropped image: send to backend to save as temp file
+							// Process each dropped image: enforce 10MB limit and send to backend to save as temp file
 							for (const dataUrl of dataUrls) {
+								// Approximate bytes from base64 (ignore header and padding)
+								const commaIdx = dataUrl.indexOf(",")
+								let tooLarge = false
+								if (commaIdx !== -1) {
+									const base64 = dataUrl.slice(commaIdx + 1).replace(/=+$/, "")
+									const approxBytes = Math.floor((base64.length * 3) / 4)
+									if (approxBytes > 10 * 1024 * 1024) {
+										console.warn("Dropped image exceeds 10MB; skipping")
+										tooLarge = true
+									}
+								}
+								if (tooLarge) continue
+
 								const requestId = Math.random().toString(36).substring(2, 9)
 
 								// Track request ID only; never store base64

From 09d512b1e5bc1d6a838d98435d0f4aa50bc96541 Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Tue, 28 Oct 2025 13:09:17 -0500
Subject: [PATCH 14/20] chore(webview): add image utils for size estimation and
 10MB limit enforcement [TS.image.ts](webview-ui/src/utils/image.ts:1)

---
 webview-ui/src/utils/image.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 webview-ui/src/utils/image.ts

diff --git a/webview-ui/src/utils/image.ts b/webview-ui/src/utils/image.ts
new file mode 100644
index 000000000000..2fa737df33b7
--- /dev/null
+++ b/webview-ui/src/utils/image.ts
@@ -0,0 +1,16 @@
+/**
+ * Utilities for image handling in webview.
+ */
+export const MAX_IMAGE_BYTES = 10 * 1024 * 1024
+
+/**
+ * Estimate raw bytes from a base64 data URL. Returns 0 for invalid input.
+ */
+export function estimateBytesFromBase64DataUrl(dataUrl: string): number {
+	if (typeof dataUrl !== "string") return 0
+	const idx = dataUrl.indexOf(",")
+	if (idx === -1) return 0
+	const base64 = dataUrl.slice(idx + 1).replace(/=+$/, "")
+	// 4 base64 chars represent 3 bytes
+	return Math.floor((base64.length * 3) / 4)
+}

From c445cfe4c736a188c2c8b8bf9cf59094cb4ba821 Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Tue, 28 Oct 2025 13:33:38 -0500
Subject: [PATCH 15/20] fix(images): remove legacy file:// URI support and use
 centralized image utils

- Remove file:// URI handling from webviewUriToFilePath (legacy support no longer needed)

- Update tests to reflect modern CDN-style URIs only

- Use MAX_IMAGE_BYTES and estimateBytesFromBase64DataUrl from webview-ui/src/utils/image.ts in ChatTextArea for consistent 10MB enforcement

Fixes knip unused export error and test failure
---
 .../misc/__tests__/imageDataUrl.spec.ts       | 31 ++-----------------
 .../src/components/chat/ChatTextArea.tsx      | 31 ++++++-------------
 2 files changed, 11 insertions(+), 51 deletions(-)

diff --git a/src/integrations/misc/__tests__/imageDataUrl.spec.ts b/src/integrations/misc/__tests__/imageDataUrl.spec.ts
index 4993303034fc..01b100afa809 100644
--- a/src/integrations/misc/__tests__/imageDataUrl.spec.ts
+++ b/src/integrations/misc/__tests__/imageDataUrl.spec.ts
@@ -18,40 +18,13 @@ describe("normalizeImageRefsToDataUrls", () => {
 		expect(result).toEqual([dataUrl])
 	})
 
-	it("should convert webview URIs to data URLs", async () => {
-		const webviewUri = "file:///path/to/test.png"
-		const mockBuffer = Buffer.from("test image data")
-
-		vi.mocked(fs.readFile).mockResolvedValue(mockBuffer)
-
-		const result = await normalizeImageRefsToDataUrls([webviewUri])
-
-		expect(result).toHaveLength(1)
-		expect(result[0]).toMatch(/^data:image\/png;base64,/)
-		expect(fs.readFile).toHaveBeenCalledWith("/path/to/test.png")
-	})
-
-	it("should handle mixed arrays of data URLs and webview URIs", async () => {
-		const dataUrl = "data:image/jpeg;base64,test123"
-		const webviewUri = "file:///path/to/test.png"
-		const mockBuffer = Buffer.from("test image data")
-
-		vi.mocked(fs.readFile).mockResolvedValue(mockBuffer)
-
-		const result = await normalizeImageRefsToDataUrls([dataUrl, webviewUri])
-
-		expect(result).toHaveLength(2)
-		expect(result[0]).toBe(dataUrl) // Data URL unchanged
-		expect(result[1]).toMatch(/^data:image\/png;base64,/) // Webview URI converted
-	})
-
 	it("should handle errors gracefully by skipping problematic images", async () => {
 		const validDataUrl = "data:image/png;base64,valid"
-		const invalidWebviewUri = "file:///nonexistent/test.png"
+		const invalidCdnUri = "vscode-file://vscode-app/nonexistent/test.png"
 
 		vi.mocked(fs.readFile).mockRejectedValue(new Error("File not found"))
 
-		const result = await normalizeImageRefsToDataUrls([validDataUrl, invalidWebviewUri])
+		const result = await normalizeImageRefsToDataUrls([validDataUrl, invalidCdnUri])
 
 		expect(result).toEqual([validDataUrl]) // Only valid ones returned
 	})
diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx
index 63e1fd4a0ab9..4e8b1570b380 100644
--- a/webview-ui/src/components/chat/ChatTextArea.tsx
+++ b/webview-ui/src/components/chat/ChatTextArea.tsx
@@ -11,6 +11,7 @@ import { ExtensionMessage } from "@roo/ExtensionMessage"
 import { vscode } from "@src/utils/vscode"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
+import { MAX_IMAGE_BYTES, estimateBytesFromBase64DataUrl } from "@src/utils/image"
 import {
 	ContextMenuOptionType,
 	getContextMenuOptions,
@@ -732,18 +733,11 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					if (dataUrls.length > 0) {
 						// Process each image: enforce 10MB limit and send to backend to save as temp file
 						for (const dataUrl of dataUrls) {
-							// Approximate bytes from base64 (ignore header and padding)
-							const commaIdx = dataUrl.indexOf(",")
-							let tooLarge = false
-							if (commaIdx !== -1) {
-								const base64 = dataUrl.slice(commaIdx + 1).replace(/=+$/, "")
-								const approxBytes = Math.floor((base64.length * 3) / 4)
-								if (approxBytes > 10 * 1024 * 1024) {
-									console.warn("Pasted image exceeds 10MB; skipping")
-									tooLarge = true
-								}
+							const approxBytes = estimateBytesFromBase64DataUrl(dataUrl)
+							if (approxBytes > MAX_IMAGE_BYTES) {
+								console.warn("Pasted image exceeds 10MB; skipping")
+								continue
 							}
-							if (tooLarge) continue
 
 							const requestId = Math.random().toString(36).substring(2, 9)
 
@@ -910,18 +904,11 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						if (dataUrls.length > 0) {
 							// Process each dropped image: enforce 10MB limit and send to backend to save as temp file
 							for (const dataUrl of dataUrls) {
-								// Approximate bytes from base64 (ignore header and padding)
-								const commaIdx = dataUrl.indexOf(",")
-								let tooLarge = false
-								if (commaIdx !== -1) {
-									const base64 = dataUrl.slice(commaIdx + 1).replace(/=+$/, "")
-									const approxBytes = Math.floor((base64.length * 3) / 4)
-									if (approxBytes > 10 * 1024 * 1024) {
-										console.warn("Dropped image exceeds 10MB; skipping")
-										tooLarge = true
-									}
+								const approxBytes = estimateBytesFromBase64DataUrl(dataUrl)
+								if (approxBytes > MAX_IMAGE_BYTES) {
+									console.warn("Dropped image exceeds 10MB; skipping")
+									continue
 								}
-								if (tooLarge) continue
 
 								const requestId = Math.random().toString(36).substring(2, 9)
 

From f3b31d7a53f4adbb68ed6096e64a75dfa515be24 Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Tue, 28 Oct 2025 13:46:11 -0500
Subject: [PATCH 16/20] test(images): add CDN URI conversion tests for
 normalizeImageRefsToDataUrls

Add test coverage for HTTPS CDN URL conversion (e.g., https://file+.vscode-resource.vscode-cdn.net/...) to base64 data URLs. This covers the critical URI-to-base64 conversion flow that was previously only tested with legacy file:// URIs.
---
 .../misc/__tests__/imageDataUrl.spec.ts       | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/integrations/misc/__tests__/imageDataUrl.spec.ts b/src/integrations/misc/__tests__/imageDataUrl.spec.ts
index 01b100afa809..0ebce80b08c7 100644
--- a/src/integrations/misc/__tests__/imageDataUrl.spec.ts
+++ b/src/integrations/misc/__tests__/imageDataUrl.spec.ts
@@ -18,6 +18,33 @@ describe("normalizeImageRefsToDataUrls", () => {
 		expect(result).toEqual([dataUrl])
 	})
 
+	it("should convert CDN webview URIs to data URLs", async () => {
+		const cdnUri = "https://file+.vscode-resource.vscode-cdn.net/path/to/test.png"
+		const mockBuffer = Buffer.from("test image data")
+
+		vi.mocked(fs.readFile).mockResolvedValue(mockBuffer)
+
+		const result = await normalizeImageRefsToDataUrls([cdnUri])
+
+		expect(result).toHaveLength(1)
+		expect(result[0]).toMatch(/^data:image\/png;base64,/)
+		expect(fs.readFile).toHaveBeenCalledWith("/path/to/test.png")
+	})
+
+	it("should handle mixed arrays of data URLs and CDN URIs", async () => {
+		const dataUrl = "data:image/jpeg;base64,test123"
+		const cdnUri = "https://file+.vscode-resource.vscode-cdn.net/path/to/test.png"
+		const mockBuffer = Buffer.from("test image data")
+
+		vi.mocked(fs.readFile).mockResolvedValue(mockBuffer)
+
+		const result = await normalizeImageRefsToDataUrls([dataUrl, cdnUri])
+
+		expect(result).toHaveLength(2)
+		expect(result[0]).toBe(dataUrl) // Data URL unchanged
+		expect(result[1]).toMatch(/^data:image\/png;base64,/) // CDN URI converted
+	})
+
 	it("should handle errors gracefully by skipping problematic images", async () => {
 		const validDataUrl = "data:image/png;base64,valid"
 		const invalidCdnUri = "vscode-file://vscode-app/nonexistent/test.png"

From d56b74ffb3327ca8a8d9b61fba375540bb2573e8 Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Tue, 28 Oct 2025 16:01:14 -0500
Subject: [PATCH 17/20] fix(tests): normalize expected path for CDN URI test in
 imageDataUrl.spec.ts

---
 src/integrations/misc/__tests__/imageDataUrl.spec.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/integrations/misc/__tests__/imageDataUrl.spec.ts b/src/integrations/misc/__tests__/imageDataUrl.spec.ts
index 0ebce80b08c7..bcbbe048dfcf 100644
--- a/src/integrations/misc/__tests__/imageDataUrl.spec.ts
+++ b/src/integrations/misc/__tests__/imageDataUrl.spec.ts
@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from "vitest"
 import { normalizeImageRefsToDataUrls } from "../imageDataUrl"
 import * as fs from "fs/promises"
+import * as path from "path"
 
 // Mock fs module
 vi.mock("fs/promises")
@@ -28,7 +29,8 @@ describe("normalizeImageRefsToDataUrls", () => {
 
 		expect(result).toHaveLength(1)
 		expect(result[0]).toMatch(/^data:image\/png;base64,/)
-		expect(fs.readFile).toHaveBeenCalledWith("/path/to/test.png")
+		const expectedPath = path.normalize("/path/to/test.png")
+		expect(fs.readFile).toHaveBeenCalledWith(expectedPath)
 	})
 
 	it("should handle mixed arrays of data URLs and CDN URIs", async () => {

From 17ee88c8027707200439e2d4d225507dae7b969c Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Mon, 3 Nov 2025 14:48:09 -0500
Subject: [PATCH 18/20] fix: optimize image handling with dual-storage approach
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add imagesBase64 field to ClineMessage schema for efficient dual storage
- Store both webview URIs (for display) and base64 (for API) when creating messages
- Remove repeated base64→file→URI conversions on every render
- Update all tools to use base64 from stored messages for API calls
- Eliminates file I/O overhead during rendering and message updates
- Improves performance by storing each format once instead of converting repeatedly
---
 packages/types/src/message.ts                 |   3 +-
 .../presentAssistantMessage.ts                |  28 +++--
 src/core/task/Task.ts                         |  73 ++++++-----
 src/core/tools/accessMcpResourceTool.ts       |   7 +-
 src/core/tools/askFollowupQuestionTool.ts     |   6 +-
 src/core/tools/attemptCompletionTool.ts       |   7 +-
 src/core/tools/executeCommandTool.ts          |   6 +-
 src/core/tools/readFileTool.ts                |  11 +-
 .../misc/__tests__/imageDataUrl.spec.ts       | 116 +++++++++++++++++-
 src/integrations/misc/imageDataUrl.ts         |  86 ++++++++++++-
 10 files changed, 298 insertions(+), 45 deletions(-)

diff --git a/packages/types/src/message.ts b/packages/types/src/message.ts
index 77c055c6e152..9cf23e386f23 100644
--- a/packages/types/src/message.ts
+++ b/packages/types/src/message.ts
@@ -206,7 +206,8 @@ export const clineMessageSchema = z.object({
 	ask: clineAskSchema.optional(),
 	say: clineSaySchema.optional(),
 	text: z.string().optional(),
-	images: z.array(z.string()).optional(),
+	images: z.array(z.string()).optional(), // Webview URIs for frontend display
+	imagesBase64: z.array(z.string()).optional(), // Base64 data URLs for API calls
 	partial: z.boolean().optional(),
 	reasoning: z.string().optional(),
 	conversationHistoryIndex: z.number().optional(),
diff --git a/src/core/assistant-message/presentAssistantMessage.ts b/src/core/assistant-message/presentAssistantMessage.ts
index 689675999fd1..cc8c68cf69ba 100644
--- a/src/core/assistant-message/presentAssistantMessage.ts
+++ b/src/core/assistant-message/presentAssistantMessage.ts
@@ -291,7 +291,12 @@ export async function presentAssistantMessage(cline: Task) {
 					// Handle both messageResponse and noButtonClicked with text.
 					if (text) {
 						await cline.say("user_feedback", text, images)
-						pushToolResult(formatResponse.toolResult(formatResponse.toolDeniedWithFeedback(text), images))
+						// Get base64 from the just-stored message for API call
+						const lastMessage = cline.clineMessages.at(-1)
+						const base64Images = lastMessage?.imagesBase64
+						pushToolResult(
+							formatResponse.toolResult(formatResponse.toolDeniedWithFeedback(text), base64Images),
+						)
 					} else {
 						pushToolResult(formatResponse.toolDenied())
 					}
@@ -302,7 +307,12 @@ export async function presentAssistantMessage(cline: Task) {
 				// Handle yesButtonClicked with text.
 				if (text) {
 					await cline.say("user_feedback", text, images)
-					pushToolResult(formatResponse.toolResult(formatResponse.toolApprovedWithFeedback(text), images))
+					// Get base64 from the just-stored message for API call
+					const lastMessage = cline.clineMessages.at(-1)
+					const base64Images = lastMessage?.imagesBase64
+					pushToolResult(
+						formatResponse.toolResult(formatResponse.toolApprovedWithFeedback(text), base64Images),
+					)
 				}
 
 				return true
@@ -396,18 +406,22 @@ export async function presentAssistantMessage(cline: Task) {
 					)
 
 					if (response === "messageResponse") {
-						// Add user feedback to userContent.
+						// Add user feedback to chat (stores both formats)
+						await cline.say("user_feedback", text, images)
+
+						// Get base64 from the just-stored message for API call
+						const lastMessage = cline.clineMessages.at(-1)
+						const base64Images = lastMessage?.imagesBase64
+
+						// Add user feedback to userContent for API
 						cline.userMessageContent.push(
 							{
 								type: "text" as const,
 								text: `Tool repetition limit reached. User feedback: ${text}`,
 							},
-							...formatResponse.imageBlocks(images),
+							...formatResponse.imageBlocks(base64Images),
 						)
 
-						// Add user feedback to chat.
-						await cline.say("user_feedback", text, images)
-
 						// Track tool repetition in telemetry.
 						TelemetryService.instance.captureConsecutiveMistakeError(cline.taskId)
 					}
diff --git a/src/core/task/Task.ts b/src/core/task/Task.ts
index b571c180dae6..290b54cfba33 100644
--- a/src/core/task/Task.ts
+++ b/src/core/task/Task.ts
@@ -644,6 +644,9 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 
 	private async updateClineMessage(message: ClineMessage) {
 		const provider = this.providerRef.deref()
+
+		// Messages now store both formats, so no conversion needed
+		// The 'images' field already contains webview URIs for display
 		await provider?.postMessageToWebview({ type: "messageUpdated", clineMessage: message })
 		this.emit(RooCodeEventName.Message, { action: "updated", message })
 
@@ -735,6 +738,7 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 					lastMessage.partial = partial
 					lastMessage.progressStatus = progressStatus
 					lastMessage.isProtected = isProtected
+					// Note: ask messages don't typically have images, so we don't update them here
 					// TODO: Be more efficient about saving and posting only new
 					// data or one whole message at a time so ignore partial for
 					// saves, and only post parts of partial message instead of
@@ -877,16 +881,8 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 			text: this.askResponseText,
 			images: this.askResponseImages,
 		}
-		// Normalize any image refs to base64 data URLs before handing back to callers
-		if (Array.isArray(result.images) && result.images.length > 0) {
-			try {
-				const { normalizeImageRefsToDataUrls } = await import("../../integrations/misc/imageDataUrl")
-				const normalized = await normalizeImageRefsToDataUrls(result.images)
-				result.images = normalized
-			} catch (e) {
-				console.error("[Task#ask] Failed to normalize image refs:", e)
-			}
-		}
+		// Images from askResponse are already webview URIs from the frontend,
+		// so no conversion needed here
 		this.askResponse = undefined
 		this.askResponseText = undefined
 		this.askResponseImages = undefined
@@ -1084,13 +1080,23 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 			throw new Error(`[RooCode#say] task ${this.taskId}.${this.instanceId} aborted`)
 		}
 
-		// Ensure any image refs are normalized to base64 data URLs before persisting or sending to APIs
+		// Convert images to both formats for efficient dual storage
+		let webviewUris: string[] | undefined
+		let base64Images: string[] | undefined
+
 		if (Array.isArray(images) && images.length > 0) {
 			try {
 				const { normalizeImageRefsToDataUrls } = await import("../../integrations/misc/imageDataUrl")
-				images = await normalizeImageRefsToDataUrls(images)
+
+				// Store original webview URIs/file paths for frontend
+				webviewUris = images
+
+				// Convert to base64 for API calls
+				base64Images = await normalizeImageRefsToDataUrls(images)
 			} catch (e) {
 				console.error("[Task#say] Failed to normalize image refs:", e)
+				// Fall back to original images if conversion fails
+				webviewUris = images
 			}
 		}
 
@@ -1104,7 +1110,8 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 				if (isUpdatingPreviousPartial) {
 					// Existing partial message, so update it.
 					lastMessage.text = text
-					lastMessage.images = images
+					lastMessage.images = webviewUris
+					lastMessage.imagesBase64 = base64Images
 					lastMessage.partial = partial
 					lastMessage.progressStatus = progressStatus
 					this.updateClineMessage(lastMessage)
@@ -1121,7 +1128,8 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 						type: "say",
 						say: type,
 						text,
-						images,
+						images: webviewUris,
+						imagesBase64: base64Images,
 						partial,
 						contextCondense,
 						metadata: options.metadata,
@@ -1137,7 +1145,8 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 					}
 
 					lastMessage.text = text
-					lastMessage.images = images
+					lastMessage.images = webviewUris
+					lastMessage.imagesBase64 = base64Images
 					lastMessage.partial = false
 					lastMessage.progressStatus = progressStatus
 					if (options.metadata) {
@@ -1168,7 +1177,8 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 						type: "say",
 						say: type,
 						text,
-						images,
+						images: webviewUris,
+						imagesBase64: base64Images,
 						contextCondense,
 						metadata: options.metadata,
 					})
@@ -1191,7 +1201,8 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 				type: "say",
 				say: type,
 				text,
-				images,
+				images: webviewUris,
+				imagesBase64: base64Images,
 				checkpoint,
 				contextCondense,
 			})
@@ -1236,14 +1247,16 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 
 		await this.providerRef.deref()?.postStateToWebview()
 
-		// Convert webview URIs to base64 data URLs for backend storage (one-time conversion)
-		const { normalizeImageRefsToDataUrls } = await import("../../integrations/misc/imageDataUrl")
-		const base64Images = images ? await normalizeImageRefsToDataUrls(images) : undefined
-
-		await this.say("text", task, base64Images) // Store base64 in backend messages
+		// Store the task message with both webview URIs and base64
+		// This is now handled in say() method which stores both formats
+		await this.say("text", task, images)
 		this.isInitialized = true
 
-		// Convert base64 to image blocks for API (no conversion needed, already base64)
+		// Get base64 from the stored message for API call
+		const lastMessage = this.clineMessages.at(-1)
+		const base64Images = lastMessage?.imagesBase64
+
+		// Convert base64 to image blocks for API
 		const { formatResponse } = await import("../prompts/responses")
 		let imageBlocks: Anthropic.ImageBlockParam[] = formatResponse.imageBlocks(base64Images)
 
@@ -1509,11 +1522,11 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 		}
 
 		if (responseImages && responseImages.length > 0) {
-			// Convert webview URIs to base64 data URLs for backend storage (one-time conversion)
+			// Images from user response are webview URIs, convert to base64 for API
 			const { normalizeImageRefsToDataUrls } = await import("../../integrations/misc/imageDataUrl")
 			const base64ResponseImages = await normalizeImageRefsToDataUrls(responseImages)
 
-			// Convert base64 to image blocks for API (no conversion needed, already base64)
+			// Convert base64 to image blocks for API
 			const { formatResponse } = await import("../prompts/responses")
 			const responseImageBlocks = formatResponse.imageBlocks(base64ResponseImages)
 			newUserContent.push(...responseImageBlocks)
@@ -1778,15 +1791,19 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 				)
 
 				if (response === "messageResponse") {
+					await this.say("user_feedback", text, images)
+
+					// Get base64 from the just-stored message for API call
+					const lastMessage = this.clineMessages.at(-1)
+					const base64Images = lastMessage?.imagesBase64
+
 					currentUserContent.push(
 						...[
 							{ type: "text" as const, text: formatResponse.tooManyMistakes(text) },
-							...formatResponse.imageBlocks(images),
+							...formatResponse.imageBlocks(base64Images),
 						],
 					)
 
-					await this.say("user_feedback", text, images)
-
 					// Track consecutive mistake errors in telemetry.
 					TelemetryService.instance.captureConsecutiveMistakeError(this.taskId)
 				}
diff --git a/src/core/tools/accessMcpResourceTool.ts b/src/core/tools/accessMcpResourceTool.ts
index c8a40f9236d2..8088d6bb34bd 100644
--- a/src/core/tools/accessMcpResourceTool.ts
+++ b/src/core/tools/accessMcpResourceTool.ts
@@ -82,7 +82,12 @@ export async function accessMcpResourceTool(
 			})
 
 			await cline.say("mcp_server_response", resourceResultPretty, images)
-			pushToolResult(formatResponse.toolResult(resourceResultPretty, images))
+
+			// Get base64 from the just-stored message for API call
+			// Note: MCP images are already base64, but say() will store them in both formats
+			const lastMessage = cline.clineMessages.at(-1)
+			const base64Images = lastMessage?.imagesBase64
+			pushToolResult(formatResponse.toolResult(resourceResultPretty, base64Images))
 
 			return
 		}
diff --git a/src/core/tools/askFollowupQuestionTool.ts b/src/core/tools/askFollowupQuestionTool.ts
index e7369368873a..e3eb71076825 100644
--- a/src/core/tools/askFollowupQuestionTool.ts
+++ b/src/core/tools/askFollowupQuestionTool.ts
@@ -78,7 +78,11 @@ export async function askFollowupQuestionTool(
 			cline.consecutiveMistakeCount = 0
 			const { text, images } = await cline.ask("followup", JSON.stringify(follow_up_json), false)
 			await cline.say("user_feedback", text ?? "", images)
-			pushToolResult(formatResponse.toolResult(`<answer>\n${text}\n</answer>`, images))
+
+			// Get base64 from the just-stored message for API call
+			const lastMessage = cline.clineMessages.at(-1)
+			const base64Images = lastMessage?.imagesBase64
+			pushToolResult(formatResponse.toolResult(`<answer>\n${text}\n</answer>`, base64Images))
 
 			return
 		}
diff --git a/src/core/tools/attemptCompletionTool.ts b/src/core/tools/attemptCompletionTool.ts
index 5074d7f4e808..74ca1282a8e1 100644
--- a/src/core/tools/attemptCompletionTool.ts
+++ b/src/core/tools/attemptCompletionTool.ts
@@ -121,6 +121,11 @@ export async function attemptCompletionTool(
 			}
 
 			await cline.say("user_feedback", text ?? "", images)
+
+			// Get base64 from the just-stored message for API call
+			const lastMessage = cline.clineMessages.at(-1)
+			const base64Images = lastMessage?.imagesBase64
+
 			const toolResults: (Anthropic.TextBlockParam | Anthropic.ImageBlockParam)[] = []
 
 			toolResults.push({
@@ -128,7 +133,7 @@ export async function attemptCompletionTool(
 				text: `The user has provided feedback on the results. Consider their input to continue the task, and then attempt completion again.\n<feedback>\n${text}\n</feedback>`,
 			})
 
-			toolResults.push(...formatResponse.imageBlocks(images))
+			toolResults.push(...formatResponse.imageBlocks(base64Images))
 			cline.userMessageContent.push({ type: "text", text: `${toolDescription()} Result:` })
 			cline.userMessageContent.push(...toolResults)
 
diff --git a/src/core/tools/executeCommandTool.ts b/src/core/tools/executeCommandTool.ts
index 2c7ce0d023e2..11e03a2a490b 100644
--- a/src/core/tools/executeCommandTool.ts
+++ b/src/core/tools/executeCommandTool.ts
@@ -311,6 +311,10 @@ export async function executeCommand(
 		const { text, images } = message
 		await task.say("user_feedback", text, images)
 
+		// Get base64 from the just-stored message for API call
+		const lastMessage = task.clineMessages.at(-1)
+		const base64Images = lastMessage?.imagesBase64
+
 		return [
 			true,
 			formatResponse.toolResult(
@@ -320,7 +324,7 @@ export async function executeCommand(
 					`The user provided the following feedback:`,
 					`<feedback>\n${text}\n</feedback>`,
 				].join("\n"),
-				images,
+				base64Images,
 			),
 		]
 	} else if (completed || exitDetails) {
diff --git a/src/core/tools/readFileTool.ts b/src/core/tools/readFileTool.ts
index 01427f4d9dc7..61d445675aa6 100644
--- a/src/core/tools/readFileTool.ts
+++ b/src/core/tools/readFileTool.ts
@@ -406,10 +406,14 @@ export async function readFileTool(
 
 			const { response, text, images } = await cline.ask("tool", completeMessage, false)
 
+			let feedbackBase64Images: string[] | undefined
 			if (response !== "yesButtonClicked") {
 				// Handle both messageResponse and noButtonClicked with text
 				if (text) {
 					await cline.say("user_feedback", text, images)
+					// Get base64 from the just-stored message
+					const lastMessage = cline.clineMessages.at(-1)
+					feedbackBase64Images = lastMessage?.imagesBase64
 				}
 				cline.didRejectTool = true
 
@@ -417,18 +421,21 @@ export async function readFileTool(
 					status: "denied",
 					xmlContent: `<file><path>${relPath}</path><status>Denied by user</status></file>`,
 					feedbackText: text,
-					feedbackImages: images,
+					feedbackImages: feedbackBase64Images,
 				})
 			} else {
 				// Handle yesButtonClicked with text
 				if (text) {
 					await cline.say("user_feedback", text, images)
+					// Get base64 from the just-stored message
+					const lastMessage = cline.clineMessages.at(-1)
+					feedbackBase64Images = lastMessage?.imagesBase64
 				}
 
 				updateFileResult(relPath, {
 					status: "approved",
 					feedbackText: text,
-					feedbackImages: images,
+					feedbackImages: feedbackBase64Images,
 				})
 			}
 		}
diff --git a/src/integrations/misc/__tests__/imageDataUrl.spec.ts b/src/integrations/misc/__tests__/imageDataUrl.spec.ts
index bcbbe048dfcf..7d4245111544 100644
--- a/src/integrations/misc/__tests__/imageDataUrl.spec.ts
+++ b/src/integrations/misc/__tests__/imageDataUrl.spec.ts
@@ -1,7 +1,8 @@
-import { describe, it, expect, vi, beforeEach } from "vitest"
-import { normalizeImageRefsToDataUrls } from "../imageDataUrl"
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
+import { normalizeImageRefsToDataUrls, normalizeDataUrlsToFilePaths } from "../imageDataUrl"
 import * as fs from "fs/promises"
 import * as path from "path"
+import * as os from "os"
 
 // Mock fs module
 vi.mock("fs/promises")
@@ -63,3 +64,114 @@ describe("normalizeImageRefsToDataUrls", () => {
 		expect(result).toEqual([])
 	})
 })
+
+describe("normalizeDataUrlsToFilePaths", () => {
+	const testGlobalStoragePath = path.join(os.tmpdir(), "test-roo-code-storage")
+
+	beforeEach(async () => {
+		vi.clearAllMocks()
+		// Mock mkdir to succeed
+		vi.mocked(fs.mkdir).mockResolvedValue(undefined)
+		// Mock writeFile to succeed
+		vi.mocked(fs.writeFile).mockResolvedValue(undefined)
+		// Mock access to fail initially (file doesn't exist)
+		vi.mocked(fs.access).mockRejectedValue(new Error("File not found"))
+	})
+
+	afterEach(() => {
+		vi.clearAllMocks()
+	})
+
+	it("should pass through non-data URLs unchanged", async () => {
+		const filePath = "/path/to/image.png"
+		const result = await normalizeDataUrlsToFilePaths([filePath], testGlobalStoragePath)
+
+		expect(result).toEqual([filePath])
+		expect(fs.writeFile).not.toHaveBeenCalled()
+	})
+
+	it("should convert data URLs to file paths", async () => {
+		const dataUrl =
+			"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=="
+
+		const result = await normalizeDataUrlsToFilePaths([dataUrl], testGlobalStoragePath)
+
+		expect(result).toHaveLength(1)
+		expect(result[0]).toMatch(/temp-images/)
+		expect(result[0]).toMatch(/\.png$/)
+		expect(fs.mkdir).toHaveBeenCalledWith(
+			expect.stringContaining("temp-images"),
+			expect.objectContaining({ recursive: true }),
+		)
+		expect(fs.writeFile).toHaveBeenCalledWith(expect.stringMatching(/temp-images.*\.png$/), expect.any(Buffer))
+	})
+
+	it("should handle mixed arrays of data URLs and file paths", async () => {
+		const dataUrl = "data:image/jpeg;base64,test123"
+		const filePath = "/existing/image.png"
+
+		const result = await normalizeDataUrlsToFilePaths([filePath, dataUrl], testGlobalStoragePath)
+
+		expect(result).toHaveLength(2)
+		expect(result[0]).toBe(filePath) // File path unchanged
+		expect(result[1]).toMatch(/temp-images/) // Data URL converted
+		expect(result[1]).toMatch(/\.jpeg$/) // Correct extension from MIME type
+	})
+
+	it("should reuse cached file paths for same data URL", async () => {
+		const dataUrl = "data:image/png;base64,test123"
+
+		// First call - should write file
+		const result1 = await normalizeDataUrlsToFilePaths([dataUrl], testGlobalStoragePath)
+		expect(fs.writeFile).toHaveBeenCalledTimes(1)
+
+		// Mock file exists for second call
+		vi.mocked(fs.access).mockResolvedValue(undefined)
+
+		// Second call - should use cached path
+		const result2 = await normalizeDataUrlsToFilePaths([dataUrl], testGlobalStoragePath)
+
+		expect(result1[0]).toBe(result2[0]) // Same path returned
+		expect(fs.writeFile).toHaveBeenCalledTimes(1) // Not written again
+	})
+
+	it("should handle errors gracefully", async () => {
+		const dataUrl = "data:image/png;base64,test"
+
+		// Mock writeFile to fail
+		vi.mocked(fs.writeFile).mockRejectedValue(new Error("Write failed"))
+
+		const result = await normalizeDataUrlsToFilePaths([dataUrl], testGlobalStoragePath)
+
+		// Should return original data URL as fallback
+		expect(result).toEqual([dataUrl])
+	})
+
+	it("should handle invalid data URL format", async () => {
+		const invalidDataUrl = "data:image/png" // Missing base64 data
+
+		const result = await normalizeDataUrlsToFilePaths([invalidDataUrl], testGlobalStoragePath)
+
+		// Should skip invalid URLs
+		expect(result).toHaveLength(0)
+	})
+
+	it("should handle empty arrays", async () => {
+		const result = await normalizeDataUrlsToFilePaths([], testGlobalStoragePath)
+		expect(result).toEqual([])
+	})
+
+	it("should extract correct file extensions from MIME types", async () => {
+		const testCases = [
+			{ dataUrl: "data:image/png;base64,test", expectedExt: ".png" },
+			{ dataUrl: "data:image/jpeg;base64,test", expectedExt: ".jpeg" },
+			{ dataUrl: "data:image/gif;base64,test", expectedExt: ".gif" },
+			{ dataUrl: "data:image/webp;base64,test", expectedExt: ".webp" },
+		]
+
+		for (const { dataUrl, expectedExt } of testCases) {
+			const result = await normalizeDataUrlsToFilePaths([dataUrl], testGlobalStoragePath)
+			expect(result[0]).toMatch(new RegExp(`${expectedExt.replace(".", "\\.")}$`))
+		}
+	})
+})
diff --git a/src/integrations/misc/imageDataUrl.ts b/src/integrations/misc/imageDataUrl.ts
index 42d93606f70b..06810aa28916 100644
--- a/src/integrations/misc/imageDataUrl.ts
+++ b/src/integrations/misc/imageDataUrl.ts
@@ -1,6 +1,7 @@
 import * as fs from "fs/promises"
 import * as path from "path"
-import { getImageBase64ForPath } from "./image-cache"
+import * as crypto from "crypto"
+import { getImageBase64ForPath, setImageBase64ForPath } from "./image-cache"
 
 /**
  * Converts webview URIs to base64 data URLs for API calls.
@@ -43,6 +44,89 @@ export async function normalizeImageRefsToDataUrls(imageRefs: string[]): Promise
 	return results
 }
 
+/**
+ * Cache mapping base64 data URLs to their temporary file paths
+ * This prevents writing the same image multiple times
+ */
+const base64ToFilePathCache = new Map<string, string>()
+
+/**
+ * Converts base64 data URLs to file paths suitable for webview URIs.
+ * Writes base64 images to temporary files and returns their paths.
+ * This is the reverse of normalizeImageRefsToDataUrls.
+ */
+export async function normalizeDataUrlsToFilePaths(dataUrls: string[], globalStoragePath: string): Promise<string[]> {
+	const results: string[] = []
+
+	// Ensure temp directory exists
+	const tempDir = path.join(globalStoragePath, "temp-images")
+	try {
+		await fs.mkdir(tempDir, { recursive: true })
+	} catch (error) {
+		console.error("Failed to create temp-images directory:", error)
+		return dataUrls // Return original data URLs as fallback
+	}
+
+	for (const dataUrl of dataUrls) {
+		// If it's not a data URL, keep it as is (might be a file path already)
+		if (!dataUrl.startsWith("data:image/")) {
+			results.push(dataUrl)
+			continue
+		}
+
+		try {
+			// Check cache first
+			const hash = crypto.createHash("md5").update(dataUrl).digest("hex")
+			let filePath = base64ToFilePathCache.get(hash)
+
+			if (filePath) {
+				// Check if file still exists
+				try {
+					await fs.access(filePath)
+					results.push(filePath)
+					continue
+				} catch {
+					// File was deleted, need to recreate
+					base64ToFilePathCache.delete(hash)
+				}
+			}
+
+			// Extract base64 data and MIME type
+			const commaIndex = dataUrl.indexOf(",")
+			if (commaIndex === -1) {
+				console.error("Invalid data URL format:", dataUrl.substring(0, 50))
+				continue
+			}
+
+			const header = dataUrl.substring(0, commaIndex)
+			const base64Data = dataUrl.substring(commaIndex + 1)
+
+			// Determine file extension from MIME type
+			const mimeMatch = header.match(/data:image\/([^;]+)/)
+			const extension = mimeMatch ? `.${mimeMatch[1]}` : ".png"
+
+			// Write to temp file
+			filePath = path.join(tempDir, `${hash}${extension}`)
+			const buffer = Buffer.from(base64Data, "base64")
+			await fs.writeFile(filePath, buffer)
+
+			// Cache the mapping
+			base64ToFilePathCache.set(hash, filePath)
+
+			// Also cache in the image cache for reverse lookups
+			setImageBase64ForPath(filePath, dataUrl)
+
+			results.push(filePath)
+		} catch (error) {
+			console.error("Failed to convert base64 data URL to file path:", error)
+			// Keep the original data URL as fallback
+			results.push(dataUrl)
+		}
+	}
+
+	return results
+}
+
 /**
  * Converts a webview URI to a file system path
  */

From 7ddfa4e529b488b4dc758ba60e76700eca4e837b Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Mon, 3 Nov 2025 15:13:07 -0500
Subject: [PATCH 19/20] refactor: remove unnecessary caching from
 normalizeDataUrlsToFilePaths

- Function is now primarily used for testing
- Production code uses dual-storage (images + imagesBase64)
- Removed redundant cache since same hash always produces same file path
- Simplified implementation and removed obsolete test
---
 .../misc/__tests__/imageDataUrl.spec.ts       | 17 ---------
 src/integrations/misc/imageDataUrl.ts         | 37 +++++--------------
 2 files changed, 9 insertions(+), 45 deletions(-)

diff --git a/src/integrations/misc/__tests__/imageDataUrl.spec.ts b/src/integrations/misc/__tests__/imageDataUrl.spec.ts
index 7d4245111544..8aef7d69fc0b 100644
--- a/src/integrations/misc/__tests__/imageDataUrl.spec.ts
+++ b/src/integrations/misc/__tests__/imageDataUrl.spec.ts
@@ -118,23 +118,6 @@ describe("normalizeDataUrlsToFilePaths", () => {
 		expect(result[1]).toMatch(/\.jpeg$/) // Correct extension from MIME type
 	})
 
-	it("should reuse cached file paths for same data URL", async () => {
-		const dataUrl = "data:image/png;base64,test123"
-
-		// First call - should write file
-		const result1 = await normalizeDataUrlsToFilePaths([dataUrl], testGlobalStoragePath)
-		expect(fs.writeFile).toHaveBeenCalledTimes(1)
-
-		// Mock file exists for second call
-		vi.mocked(fs.access).mockResolvedValue(undefined)
-
-		// Second call - should use cached path
-		const result2 = await normalizeDataUrlsToFilePaths([dataUrl], testGlobalStoragePath)
-
-		expect(result1[0]).toBe(result2[0]) // Same path returned
-		expect(fs.writeFile).toHaveBeenCalledTimes(1) // Not written again
-	})
-
 	it("should handle errors gracefully", async () => {
 		const dataUrl = "data:image/png;base64,test"
 
diff --git a/src/integrations/misc/imageDataUrl.ts b/src/integrations/misc/imageDataUrl.ts
index 06810aa28916..a764b92d8359 100644
--- a/src/integrations/misc/imageDataUrl.ts
+++ b/src/integrations/misc/imageDataUrl.ts
@@ -44,16 +44,13 @@ export async function normalizeImageRefsToDataUrls(imageRefs: string[]): Promise
 	return results
 }
 
-/**
- * Cache mapping base64 data URLs to their temporary file paths
- * This prevents writing the same image multiple times
- */
-const base64ToFilePathCache = new Map<string, string>()
-
 /**
  * Converts base64 data URLs to file paths suitable for webview URIs.
  * Writes base64 images to temporary files and returns their paths.
- * This is the reverse of normalizeImageRefsToDataUrls.
+ *
+ * NOTE: This function is primarily used for testing. In production, the dual-storage
+ * approach (images + imagesBase64 in ClineMessage) eliminates the need for this conversion.
+ * No caching is implemented since this is a test utility.
  */
 export async function normalizeDataUrlsToFilePaths(dataUrls: string[], globalStoragePath: string): Promise<string[]> {
 	const results: string[] = []
@@ -75,22 +72,6 @@ export async function normalizeDataUrlsToFilePaths(dataUrls: string[], globalSto
 		}
 
 		try {
-			// Check cache first
-			const hash = crypto.createHash("md5").update(dataUrl).digest("hex")
-			let filePath = base64ToFilePathCache.get(hash)
-
-			if (filePath) {
-				// Check if file still exists
-				try {
-					await fs.access(filePath)
-					results.push(filePath)
-					continue
-				} catch {
-					// File was deleted, need to recreate
-					base64ToFilePathCache.delete(hash)
-				}
-			}
-
 			// Extract base64 data and MIME type
 			const commaIndex = dataUrl.indexOf(",")
 			if (commaIndex === -1) {
@@ -105,15 +86,15 @@ export async function normalizeDataUrlsToFilePaths(dataUrls: string[], globalSto
 			const mimeMatch = header.match(/data:image\/([^;]+)/)
 			const extension = mimeMatch ? `.${mimeMatch[1]}` : ".png"
 
+			// Create a unique hash for this image
+			const hash = crypto.createHash("md5").update(dataUrl).digest("hex")
+
 			// Write to temp file
-			filePath = path.join(tempDir, `${hash}${extension}`)
+			const filePath = path.join(tempDir, `${hash}${extension}`)
 			const buffer = Buffer.from(base64Data, "base64")
 			await fs.writeFile(filePath, buffer)
 
-			// Cache the mapping
-			base64ToFilePathCache.set(hash, filePath)
-
-			// Also cache in the image cache for reverse lookups
+			// Cache the reverse mapping for image-cache lookups
 			setImageBase64ForPath(filePath, dataUrl)
 
 			results.push(filePath)

From 3ff9b21daebaf87a45e1614ec4c8089534e3ee77 Mon Sep 17 00:00:00 2001
From: daniel-lxs <ricciodaniel98@gmail.com>
Date: Mon, 3 Nov 2025 16:58:01 -0500
Subject: [PATCH 20/20] refactor: remove unused normalizeDataUrlsToFilePaths
 function
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Function was only used in tests, not in production code
- Dual-storage approach (images + imagesBase64) eliminated need for base64→file conversion
- Removed ~60 lines of function code + ~90 lines of tests
- Simplified imageDataUrl module to focus on production use case
- Kept normalizeImageRefsToDataUrls which is used in production (Task.ts)
---
 .../misc/__tests__/imageDataUrl.spec.ts       | 99 +------------------
 src/integrations/misc/imageDataUrl.ts         | 67 +------------
 2 files changed, 3 insertions(+), 163 deletions(-)

diff --git a/src/integrations/misc/__tests__/imageDataUrl.spec.ts b/src/integrations/misc/__tests__/imageDataUrl.spec.ts
index 8aef7d69fc0b..bcbbe048dfcf 100644
--- a/src/integrations/misc/__tests__/imageDataUrl.spec.ts
+++ b/src/integrations/misc/__tests__/imageDataUrl.spec.ts
@@ -1,8 +1,7 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
-import { normalizeImageRefsToDataUrls, normalizeDataUrlsToFilePaths } from "../imageDataUrl"
+import { describe, it, expect, vi, beforeEach } from "vitest"
+import { normalizeImageRefsToDataUrls } from "../imageDataUrl"
 import * as fs from "fs/promises"
 import * as path from "path"
-import * as os from "os"
 
 // Mock fs module
 vi.mock("fs/promises")
@@ -64,97 +63,3 @@ describe("normalizeImageRefsToDataUrls", () => {
 		expect(result).toEqual([])
 	})
 })
-
-describe("normalizeDataUrlsToFilePaths", () => {
-	const testGlobalStoragePath = path.join(os.tmpdir(), "test-roo-code-storage")
-
-	beforeEach(async () => {
-		vi.clearAllMocks()
-		// Mock mkdir to succeed
-		vi.mocked(fs.mkdir).mockResolvedValue(undefined)
-		// Mock writeFile to succeed
-		vi.mocked(fs.writeFile).mockResolvedValue(undefined)
-		// Mock access to fail initially (file doesn't exist)
-		vi.mocked(fs.access).mockRejectedValue(new Error("File not found"))
-	})
-
-	afterEach(() => {
-		vi.clearAllMocks()
-	})
-
-	it("should pass through non-data URLs unchanged", async () => {
-		const filePath = "/path/to/image.png"
-		const result = await normalizeDataUrlsToFilePaths([filePath], testGlobalStoragePath)
-
-		expect(result).toEqual([filePath])
-		expect(fs.writeFile).not.toHaveBeenCalled()
-	})
-
-	it("should convert data URLs to file paths", async () => {
-		const dataUrl =
-			"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=="
-
-		const result = await normalizeDataUrlsToFilePaths([dataUrl], testGlobalStoragePath)
-
-		expect(result).toHaveLength(1)
-		expect(result[0]).toMatch(/temp-images/)
-		expect(result[0]).toMatch(/\.png$/)
-		expect(fs.mkdir).toHaveBeenCalledWith(
-			expect.stringContaining("temp-images"),
-			expect.objectContaining({ recursive: true }),
-		)
-		expect(fs.writeFile).toHaveBeenCalledWith(expect.stringMatching(/temp-images.*\.png$/), expect.any(Buffer))
-	})
-
-	it("should handle mixed arrays of data URLs and file paths", async () => {
-		const dataUrl = "data:image/jpeg;base64,test123"
-		const filePath = "/existing/image.png"
-
-		const result = await normalizeDataUrlsToFilePaths([filePath, dataUrl], testGlobalStoragePath)
-
-		expect(result).toHaveLength(2)
-		expect(result[0]).toBe(filePath) // File path unchanged
-		expect(result[1]).toMatch(/temp-images/) // Data URL converted
-		expect(result[1]).toMatch(/\.jpeg$/) // Correct extension from MIME type
-	})
-
-	it("should handle errors gracefully", async () => {
-		const dataUrl = "data:image/png;base64,test"
-
-		// Mock writeFile to fail
-		vi.mocked(fs.writeFile).mockRejectedValue(new Error("Write failed"))
-
-		const result = await normalizeDataUrlsToFilePaths([dataUrl], testGlobalStoragePath)
-
-		// Should return original data URL as fallback
-		expect(result).toEqual([dataUrl])
-	})
-
-	it("should handle invalid data URL format", async () => {
-		const invalidDataUrl = "data:image/png" // Missing base64 data
-
-		const result = await normalizeDataUrlsToFilePaths([invalidDataUrl], testGlobalStoragePath)
-
-		// Should skip invalid URLs
-		expect(result).toHaveLength(0)
-	})
-
-	it("should handle empty arrays", async () => {
-		const result = await normalizeDataUrlsToFilePaths([], testGlobalStoragePath)
-		expect(result).toEqual([])
-	})
-
-	it("should extract correct file extensions from MIME types", async () => {
-		const testCases = [
-			{ dataUrl: "data:image/png;base64,test", expectedExt: ".png" },
-			{ dataUrl: "data:image/jpeg;base64,test", expectedExt: ".jpeg" },
-			{ dataUrl: "data:image/gif;base64,test", expectedExt: ".gif" },
-			{ dataUrl: "data:image/webp;base64,test", expectedExt: ".webp" },
-		]
-
-		for (const { dataUrl, expectedExt } of testCases) {
-			const result = await normalizeDataUrlsToFilePaths([dataUrl], testGlobalStoragePath)
-			expect(result[0]).toMatch(new RegExp(`${expectedExt.replace(".", "\\.")}$`))
-		}
-	})
-})
diff --git a/src/integrations/misc/imageDataUrl.ts b/src/integrations/misc/imageDataUrl.ts
index a764b92d8359..42d93606f70b 100644
--- a/src/integrations/misc/imageDataUrl.ts
+++ b/src/integrations/misc/imageDataUrl.ts
@@ -1,7 +1,6 @@
 import * as fs from "fs/promises"
 import * as path from "path"
-import * as crypto from "crypto"
-import { getImageBase64ForPath, setImageBase64ForPath } from "./image-cache"
+import { getImageBase64ForPath } from "./image-cache"
 
 /**
  * Converts webview URIs to base64 data URLs for API calls.
@@ -44,70 +43,6 @@ export async function normalizeImageRefsToDataUrls(imageRefs: string[]): Promise
 	return results
 }
 
-/**
- * Converts base64 data URLs to file paths suitable for webview URIs.
- * Writes base64 images to temporary files and returns their paths.
- *
- * NOTE: This function is primarily used for testing. In production, the dual-storage
- * approach (images + imagesBase64 in ClineMessage) eliminates the need for this conversion.
- * No caching is implemented since this is a test utility.
- */
-export async function normalizeDataUrlsToFilePaths(dataUrls: string[], globalStoragePath: string): Promise<string[]> {
-	const results: string[] = []
-
-	// Ensure temp directory exists
-	const tempDir = path.join(globalStoragePath, "temp-images")
-	try {
-		await fs.mkdir(tempDir, { recursive: true })
-	} catch (error) {
-		console.error("Failed to create temp-images directory:", error)
-		return dataUrls // Return original data URLs as fallback
-	}
-
-	for (const dataUrl of dataUrls) {
-		// If it's not a data URL, keep it as is (might be a file path already)
-		if (!dataUrl.startsWith("data:image/")) {
-			results.push(dataUrl)
-			continue
-		}
-
-		try {
-			// Extract base64 data and MIME type
-			const commaIndex = dataUrl.indexOf(",")
-			if (commaIndex === -1) {
-				console.error("Invalid data URL format:", dataUrl.substring(0, 50))
-				continue
-			}
-
-			const header = dataUrl.substring(0, commaIndex)
-			const base64Data = dataUrl.substring(commaIndex + 1)
-
-			// Determine file extension from MIME type
-			const mimeMatch = header.match(/data:image\/([^;]+)/)
-			const extension = mimeMatch ? `.${mimeMatch[1]}` : ".png"
-
-			// Create a unique hash for this image
-			const hash = crypto.createHash("md5").update(dataUrl).digest("hex")
-
-			// Write to temp file
-			const filePath = path.join(tempDir, `${hash}${extension}`)
-			const buffer = Buffer.from(base64Data, "base64")
-			await fs.writeFile(filePath, buffer)
-
-			// Cache the reverse mapping for image-cache lookups
-			setImageBase64ForPath(filePath, dataUrl)
-
-			results.push(filePath)
-		} catch (error) {
-			console.error("Failed to convert base64 data URL to file path:", error)
-			// Keep the original data URL as fallback
-			results.push(dataUrl)
-		}
-	}
-
-	return results
-}
-
 /**
  * Converts a webview URI to a file system path
  */