fix(agent-manager): display pasted images in message list

.changeset/fix-agent-manager-image-display.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Fixed broken image display in Agent Manager message list. Images pasted or attached to messages now render correctly as thumbnails in both user feedback messages and queued messages.

webview-ui/src/kilocode/agent-manager/components/MessageList.tsx

@@ -19,6 +19,7 @@ import { FollowUpSuggestions } from "./FollowUpSuggestions"
 import { CommandExecutionBlock } from "./CommandExecutionBlock"
 import { ProgressIndicator } from "./ProgressIndicator"
 import { ReasoningBlock } from "./ReasoningBlock"
+import MessageThumbnails from "./MessageThumbnails"
 import { vscode } from "../utils/vscode"
 import {
 	MessageCircle,
@@ -276,7 +277,14 @@ function MessageItem({ message, isLast, commandExecutionByTs, onSuggestionClick,
 			case "user_feedback": {
 				icon = <User size={16} />
 				title = t("messages.youSaid")
-				content = <SimpleMarkdown content={messageText} />
+				content = (
+					<>
+						<SimpleMarkdown content={messageText} />
+						{message.images && message.images.length > 0 && (
+							<MessageThumbnails images={message.images} style={{ marginTop: "8px" }} />
+						)}
+					</>
+				)
 				break
 			}
 			case "completion_result": {
@@ -444,6 +452,9 @@ function QueuedMessageItem({ queuedMessage, isSending: _isSending, onRetry, onDi
 				</div>
 				<div className="am-message-body">
 					<SimpleMarkdown content={queuedMessage.content} />
+					{queuedMessage.images && queuedMessage.images.length > 0 && (
+						<MessageThumbnails images={queuedMessage.images} style={{ marginTop: "8px" }} />
+					)}
 				</div>
 				{queuedMessage.status === "failed" && (
 					<div className="mt-2 space-y-2">

webview-ui/src/kilocode/agent-manager/components/MessageThumbnails.tsx

@@ -0,0 +1,47 @@
+import React, { memo } from "react"
+import { vscode } from "../utils/vscode"
+
+interface MessageThumbnailsProps {
+	images: string[]
+	style?: React.CSSProperties
+}
+
+/**
+ * Simple read-only thumbnails component for displaying images in messages.
+ * Uses the agent manager's vscode utility to avoid conflicts with the main webview.
+ */
+const MessageThumbnails: React.FC<MessageThumbnailsProps> = ({ images, style }) => {
+	const handleImageClick = (image: string) => {
+		vscode.postMessage({ type: "openImage", text: image })
+	}
+
+	return (
+		<div
+			className="py-1"
+			style={{
+				display: "flex",
+				flexWrap: "wrap",
+				gap: 5,
+				rowGap: 3,
+				...style,
+			}}>
+			{images.map((image, index) => (
+				<img
+					key={index}
+					src={image}
+					alt={`Thumbnail ${index + 1}`}
+					style={{
+						width: 34,
+						height: 34,
+						objectFit: "cover",
+						borderRadius: 4,
+						cursor: "pointer",
+					}}
+					onClick={() => handleImageClick(image)}
+				/>
+			))}
+		</div>
+	)
+}
+
+export default memo(MessageThumbnails)