From 82bf50950afa55f15fffbf82c9188546b10d0238 Mon Sep 17 00:00:00 2001
From: marius-kilocode <marius@kilocode.ai>
Date: Fri, 23 Jan 2026 17:46:15 +0100
Subject: [PATCH] fix(agent-manager): display pasted images in message list

- Add MessageThumbnails component using agent manager's vscode utility
- Render images in user_feedback messages
- Render images in queued messages
- Avoid VS Code API conflict with main webview's Thumbnails component
---
 .changeset/fix-agent-manager-image-display.md |  5 ++
 .../agent-manager/components/MessageList.tsx  | 13 ++++-
 .../components/MessageThumbnails.tsx          | 47 +++++++++++++++++++
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fix-agent-manager-image-display.md
 create mode 100644 webview-ui/src/kilocode/agent-manager/components/MessageThumbnails.tsx

diff --git a/.changeset/fix-agent-manager-image-display.md b/.changeset/fix-agent-manager-image-display.md
new file mode 100644
index 00000000000..1bf6c2a7778
--- /dev/null
+++ b/.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.
diff --git a/webview-ui/src/kilocode/agent-manager/components/MessageList.tsx b/webview-ui/src/kilocode/agent-manager/components/MessageList.tsx
index bca35dc5a87..59f76fd2798 100644
--- a/webview-ui/src/kilocode/agent-manager/components/MessageList.tsx
+++ b/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">
diff --git a/webview-ui/src/kilocode/agent-manager/components/MessageThumbnails.tsx b/webview-ui/src/kilocode/agent-manager/components/MessageThumbnails.tsx
new file mode 100644
index 00000000000..da6b626405d
--- /dev/null
+++ b/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)