diff --git a/src/core/webview/__tests__/ClineProvider.test.ts b/src/core/webview/__tests__/ClineProvider.test.ts
index 6ced4989a4..266857c01b 100644
--- a/src/core/webview/__tests__/ClineProvider.test.ts
+++ b/src/core/webview/__tests__/ClineProvider.test.ts
@@ -152,6 +152,9 @@ jest.mock("vscode", () => ({
 	window: {
 		showInformationMessage: jest.fn(),
 		showErrorMessage: jest.fn(),
+		createTextEditorDecorationType: jest.fn().mockReturnValue({
+			dispose: jest.fn(),
+		}),
 	},
 	workspace: {
 		getConfiguration: jest.fn().mockReturnValue({
diff --git a/src/core/webview/__tests__/webviewMessageHandler.test.ts b/src/core/webview/__tests__/webviewMessageHandler.test.ts
index 7f3bc49654..24d786a5ea 100644
--- a/src/core/webview/__tests__/webviewMessageHandler.test.ts
+++ b/src/core/webview/__tests__/webviewMessageHandler.test.ts
@@ -2,9 +2,20 @@ import { webviewMessageHandler } from "../webviewMessageHandler"
 import { ClineProvider } from "../ClineProvider"
 import { getModels } from "../../../api/providers/fetchers/modelCache"
 import { ModelRecord } from "../../../shared/api"
+import type { ClineMessage } from "@roo-code/types"
+import * as vscode from "vscode"
 
 // Mock dependencies
 jest.mock("../../../api/providers/fetchers/modelCache")
+jest.mock("vscode", () => ({
+	window: {
+		showWarningMessage: jest.fn(),
+	},
+}))
+jest.mock("../../checkpoints", () => ({
+	checkpointRestore: jest.fn(),
+}))
+
 const mockGetModels = getModels as jest.MockedFunction<typeof getModels>
 
 // Mock ClineProvider
@@ -272,3 +283,93 @@ describe("webviewMessageHandler - requestRouterModels", () => {
 		})
 	})
 })
+
+describe("webviewMessageHandler - editMessage", () => {
+	let mockCline: any
+
+	beforeEach(() => {
+		jest.clearAllMocks()
+
+		// Mock Cline instance
+		mockCline = {
+			taskId: "test-task-id",
+			clineMessages: [
+				{ ts: 1000, type: "say", say: "user_feedback", text: "First message" },
+				{ ts: 2000, type: "say", say: "user_feedback", text: "Second message" },
+				{ ts: 3000, type: "say", say: "checkpoint_saved", text: "Checkpoint saved" },
+				{ ts: 4000, type: "say", say: "user_feedback", text: "Third message" },
+			] as ClineMessage[],
+			apiConversationHistory: [
+				{ ts: 1000, role: "user", content: "First message" },
+				{ ts: 2000, role: "user", content: "Second message" },
+				{ ts: 4000, role: "user", content: "Third message" },
+			],
+			overwriteClineMessages: jest.fn(),
+			overwriteApiConversationHistory: jest.fn(),
+		}
+
+		mockClineProvider.getCurrentCline = jest.fn().mockReturnValue(mockCline)
+		mockClineProvider.getState = jest.fn().mockResolvedValue({ enableCheckpoints: true })
+		mockClineProvider.getTaskWithId = jest.fn().mockResolvedValue({
+			historyItem: { clineMessages: mockCline.clineMessages },
+		})
+		mockClineProvider.postStateToWebview = jest.fn()
+		mockClineProvider.initClineWithHistoryItem = jest.fn()
+	})
+
+	it("handles basic message editing without confirmation", async () => {
+		// Mock no subsequent messages and no checkpoints
+		mockCline.clineMessages = [{ ts: 1000, type: "say", say: "user_feedback", text: "Only message" }]
+		mockClineProvider.getState = jest.fn().mockResolvedValue({ enableCheckpoints: false })
+
+		await webviewMessageHandler(mockClineProvider, {
+			type: "editMessage",
+			value: 1000,
+			text: "Edited message",
+		})
+
+		expect(mockClineProvider.initClineWithHistoryItem).toHaveBeenCalled()
+	})
+
+	it("shows confirmation dialog when editing affects subsequent messages", async () => {
+		const mockShowWarning = vscode.window.showWarningMessage as jest.Mock
+		mockShowWarning.mockResolvedValue("Edit Message")
+
+		await webviewMessageHandler(mockClineProvider, {
+			type: "editMessage",
+			value: 2000, // Edit second message, affecting third message
+			text: "Edited second message",
+		})
+
+		expect(mockShowWarning).toHaveBeenCalledWith(
+			"Edit and delete subsequent messages?\n\n• 1 checkpoint(s) will be removed",
+			{ modal: true },
+			"Edit Message",
+		)
+		expect(mockClineProvider.initClineWithHistoryItem).toHaveBeenCalled()
+	})
+
+	it("cancels edit when user declines confirmation", async () => {
+		const mockShowWarning = vscode.window.showWarningMessage as jest.Mock
+		mockShowWarning.mockResolvedValue(undefined) // User cancelled
+
+		await webviewMessageHandler(mockClineProvider, {
+			type: "editMessage",
+			value: 2000,
+			text: "This edit should be cancelled",
+		})
+
+		expect(mockClineProvider.postStateToWebview).toHaveBeenCalled()
+		expect(mockClineProvider.initClineWithHistoryItem).not.toHaveBeenCalled()
+	})
+
+	it("handles invalid message parameters gracefully", async () => {
+		await webviewMessageHandler(mockClineProvider, {
+			type: "editMessage",
+			value: undefined, // Invalid value
+			text: "Should not process",
+		})
+
+		expect(mockClineProvider.initClineWithHistoryItem).not.toHaveBeenCalled()
+	})
+})
diff --git a/src/core/webview/webviewMessageHandler.ts b/src/core/webview/webviewMessageHandler.ts
index a4d9dafecf..87a0638560 100644
--- a/src/core/webview/webviewMessageHandler.ts
+++ b/src/core/webview/webviewMessageHandler.ts
@@ -3,7 +3,13 @@ import fs from "fs/promises"
 import pWaitFor from "p-wait-for"
 import * as vscode from "vscode"
 
-import { type Language, type ProviderSettings, type GlobalState, TelemetryEventName } from "@roo-code/types"
+import {
+	type Language,
+	type ProviderSettings,
+	type GlobalState,
+	TelemetryEventName,
+	type ClineMessage,
+} from "@roo-code/types"
 import { CloudService } from "@roo-code/cloud"
 import { TelemetryService } from "@roo-code/telemetry"
 
@@ -28,6 +34,7 @@ import { playTts, setTtsEnabled, setTtsSpeed, stopTts } from "../../utils/tts"
 import { singleCompletionHandler } from "../../utils/single-completion-handler"
 import { searchCommits } from "../../utils/git"
 import { exportSettings, importSettings } from "../config/importExport"
+import { checkpointRestore } from "../checkpoints"
 import { getOpenAiModels } from "../../api/providers/openai"
 import { getOllamaModels } from "../../api/providers/ollama"
 import { getVsCodeLmModels } from "../../api/providers/vscode-lm"
@@ -959,6 +966,179 @@ export const webviewMessageHandler = async (
 			}
 			break
 		}
+		case "editMessage": {
+			if (
+				provider.getCurrentCline() &&
+				typeof message.value === "number" &&
+				message.value &&
+				message.text !== undefined
+			) {
+				const timeCutoff = message.value - 1000 // 1 second buffer before the message to edit
+
+				const messageIndex = provider
+					.getCurrentCline()!
+					.clineMessages.findIndex((msg) => msg.ts && msg.ts >= timeCutoff)
+
+				const apiConversationHistoryIndex =
+					provider
+						.getCurrentCline()
+						?.apiConversationHistory.findIndex((msg) => msg.ts && msg.ts >= timeCutoff) ?? -1
+
+				if (messageIndex !== -1) {
+					// Check if there are subsequent messages that will be deleted
+					const totalMessages = provider.getCurrentCline()!.clineMessages.length
+					const hasSubsequentMessages = messageIndex < totalMessages - 1
+
+					// Check for checkpoints if enabled
+					const checkpointsEnabled = (await provider.getState()).enableCheckpoints
+					let affectedCheckpointsCount = 0
+					let closestPreviousCheckpoint: ClineMessage | undefined
+
+					if (checkpointsEnabled) {
+						const editMessageTimestamp = message.value
+						const checkpointMessages = provider
+							.getCurrentCline()!
+							.clineMessages.filter((msg) => msg.say === "checkpoint_saved")
+							.sort((a, b) => a.ts - b.ts)
+
+						// Find checkpoints that will be affected (those after the edited message)
+						affectedCheckpointsCount = checkpointMessages.filter(
+							(cp) => cp.ts > editMessageTimestamp,
+						).length
+
+						// Find the closest checkpoint before the edited message
+						closestPreviousCheckpoint = checkpointMessages
+							.reverse()
+							.find((cp) => cp.ts < editMessageTimestamp)
+					}
+
+					// Build confirmation message
+					let confirmationMessage = "Edit and delete subsequent messages?"
+
+					if (checkpointsEnabled && affectedCheckpointsCount > 0) {
+						confirmationMessage += `\n\n• ${affectedCheckpointsCount} checkpoint(s) will be removed`
+
+						if (closestPreviousCheckpoint) {
+							confirmationMessage += "\n• Files will restore to previous checkpoint"
+						}
+					}
+
+					// Show confirmation dialog if there are subsequent messages or affected checkpoints
+					if (hasSubsequentMessages || affectedCheckpointsCount > 0) {
+						const confirmation = await vscode.window.showWarningMessage(
+							confirmationMessage,
+							{ modal: true },
+							"Edit Message",
+						)
+
+						if (confirmation !== "Edit Message") {
+							// User cancelled, update the webview to show the original state
+							await provider.postStateToWebview()
+							break
+						}
+					}
+
+					const { historyItem } = await provider.getTaskWithId(provider.getCurrentCline()!.taskId)
+
+					// Get messages up to and including the edited message
+					const updatedClineMessages = [
+						...provider.getCurrentCline()!.clineMessages.slice(0, messageIndex + 1),
+					]
+					const messageToEdit = updatedClineMessages[messageIndex]
+
+					if (messageToEdit && messageToEdit.type === "say" && messageToEdit.say === "user_feedback") {
+						// Update the text content
+						messageToEdit.text = message.text
+
+						// Update images if provided
+						if (message.images) {
+							messageToEdit.images = message.images
+						}
+
+						// Overwrite with only messages up to and including the edited one
+						await provider.getCurrentCline()!.overwriteClineMessages(updatedClineMessages)
+
+						// Handle checkpoint restoration if checkpoints are enabled
+						if (checkpointsEnabled && closestPreviousCheckpoint) {
+							// Restore to the closest checkpoint before the edited message
+							const commitHash = closestPreviousCheckpoint.text // The commit hash is stored in the text field
+							if (commitHash) {
+								// Use "preview" mode to only restore files without affecting messages
+								// (we've already handled message cleanup above)
+								await checkpointRestore(provider.getCurrentCline()!, {
+									ts: closestPreviousCheckpoint.ts,
+									commitHash: commitHash,
+									mode: "preview",
+								})
+							}
+						}
+
+						// Update API conversation history if needed
+						if (apiConversationHistoryIndex !== -1) {
+							const updatedApiHistory = [
+								...provider
+									.getCurrentCline()!
+									.apiConversationHistory.slice(0, apiConversationHistoryIndex + 1),
+							]
+							const apiMessage = updatedApiHistory[apiConversationHistoryIndex]
+
+							if (apiMessage && apiMessage.role === "user") {
+								// Update the content in API history
+								if (typeof apiMessage.content === "string") {
+									apiMessage.content = message.text
+								} else if (Array.isArray(apiMessage.content)) {
+									// Find and update text content blocks
+									apiMessage.content = apiMessage.content.map((block: any) => {
+										if (block.type === "text") {
+											return { ...block, text: message.text }
+										}
+										return block
+									})
+
+									// Handle image updates if provided
+									if (message.images) {
+										// Remove existing image blocks
+										apiMessage.content = apiMessage.content.filter(
+											(block: any) => block.type !== "image",
+										)
+
+										// Add new image blocks
+										const imageBlocks = message.images.map((image) => ({
+											type: "image" as const,
+											source: {
+												type: "base64" as const,
+												media_type: (image.startsWith("data:image/png")
+													? "image/png"
+													: "image/jpeg") as
+													| "image/png"
+													| "image/jpeg"
+													| "image/gif"
+													| "image/webp",
+												data: image.split(",")[1] || image,
+											},
+										}))
+
+										// Add image blocks after text
+										apiMessage.content.push(...imageBlocks)
+									}
+								}
+
+								// Overwrite with only API messages up to and including the edited one
+								await provider.getCurrentCline()!.overwriteApiConversationHistory(updatedApiHistory)
+							}
+						}
+
+						await provider.initClineWithHistoryItem(historyItem)
+						// Force a state update to ensure the webview reflects the changes
+						await provider.postStateToWebview()
+
+						// Note: Removed auto-resume logic to prevent duplicate messages.
+						// The user will manually send the edited message when ready.
+					}
+				}
+			}
+			break
+		}
 		case "screenshotQuality":
 			await updateGlobalState("screenshotQuality", message.value)
 			await provider.postStateToWebview()
diff --git a/src/shared/WebviewMessage.ts b/src/shared/WebviewMessage.ts
index 5186c716b9..56cd2e9b1c 100644
--- a/src/shared/WebviewMessage.ts
+++ b/src/shared/WebviewMessage.ts
@@ -99,6 +99,7 @@ export interface WebviewMessage {
 		| "enhancedPrompt"
 		| "draggedImages"
 		| "deleteMessage"
+		| "editMessage"
 		| "terminalOutputLineLimit"
 		| "terminalShellIntegrationTimeout"
 		| "terminalShellIntegrationDisabled"
diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index 43824c5902..e1b911d18a 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -107,11 +107,41 @@ export const ChatRowContent = ({
 	const [showCopySuccess, setShowCopySuccess] = useState(false)
 	const { copyWithFeedback } = useCopyToClipboard()
 
+	// Edit mode state
+	const [isEditing, setIsEditing] = useState(false)
+	const [editValue, setEditValue] = useState(message.text || "")
+	const [editImages, setEditImages] = useState<string[]>(message.images || [])
+
 	// Memoized callback to prevent re-renders caused by inline arrow functions
 	const handleToggleExpand = useCallback(() => {
 		onToggleExpand(message.ts)
 	}, [onToggleExpand, message.ts])
 
+	// Edit mode handlers
+	const handleEditSave = useCallback(() => {
+		if (editValue.trim() || editImages.length > 0) {
+			vscode.postMessage({
+				type: "editMessage",
+				value: message.ts,
+				text: editValue.trim(),
+				images: editImages.length > 0 ? editImages : undefined,
+			})
+			setIsEditing(false)
+		}
+	}, [editValue, editImages, message.ts])
+
+	const handleEditCancel = useCallback(() => {
+		setEditValue(message.text || "")
+		setEditImages(message.images || [])
+		setIsEditing(false)
+	}, [message.text, message.images])
+
+	const handleStartEdit = useCallback(() => {
+		setEditValue(message.text || "")
+		setEditImages(message.images || [])
+		setIsEditing(true)
+	}, [message.text, message.images])
+
 	const [cost, apiReqCancelReason, apiReqStreamingFailedMessage] = useMemo(() => {
 		if (message.text !== null && message.text !== undefined && message.say === "api_req_started") {
 			const info = safeJsonParse<ClineApiReqInfo>(message.text)
@@ -978,24 +1008,107 @@ export const ChatRowContent = ({
 						</div>
 					)
 				case "user_feedback":
-					return (
-						<div className="bg-vscode-editor-background border rounded-xs p-1 overflow-hidden whitespace-pre-wrap">
-							<div className="flex justify-between">
-								<div className="flex-grow px-2 py-1 wrap-anywhere">
-									<Mention text={message.text} withShadow />
+					if (isEditing) {
+						return (
+							<div className="bg-vscode-editor-background border rounded-xs p-1 overflow-hidden">
+								<div className="space-y-2 p-1">
+									<textarea
+										value={editValue}
+										onChange={(e) => setEditValue(e.target.value)}
+										onKeyDown={(e) => {
+											if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+												e.preventDefault()
+												handleEditSave()
+											} else if (e.key === "Escape") {
+												e.preventDefault()
+												handleEditCancel()
+											}
+										}}
+										className="w-full min-h-[60px] max-h-[200px] p-2 
+											bg-vscode-input-background 
+											text-vscode-input-foreground 
+											rounded-xs resize-none 
+											focus:outline-none focus:ring-1 focus:ring-vscode-focusBorder"
+										placeholder={t("chat:typeMessagePlaceholder")}
+										autoFocus
+									/>
+									{editImages.length > 0 && (
+										<Thumbnails
+											images={editImages}
+											style={{ marginTop: "4px" }}
+											setImages={setEditImages}
+										/>
+									)}
+									<div className="flex gap-2 justify-between">
+										<Button
+											variant="ghost"
+											size="icon"
+											title={t("chat:addImages")}
+											onClick={async (e) => {
+												e.stopPropagation()
+												vscode.postMessage({ type: "selectImages" })
+												// Wait for the response
+												const handleSelectedImages = (event: MessageEvent) => {
+													const message = event.data
+													if (message.type === "selectedImages" && message.images) {
+														setEditImages([...editImages, ...message.images])
+														window.removeEventListener("message", handleSelectedImages)
+													}
+												}
+												window.addEventListener("message", handleSelectedImages)
+											}}
+											disabled={editImages.length >= 20}>
+											<span className="codicon codicon-file-media" />
+										</Button>
+										<div className="flex gap-2">
+											<Button variant="secondary" size="sm" onClick={handleEditCancel}>
+												{t("chat:cancel.title")}
+											</Button>
+											<Button
+												variant="default"
+												size="sm"
+												onClick={handleEditSave}
+												disabled={!editValue.trim() && editImages.length === 0}>
+												{t("chat:save.title")}
+											</Button>
+										</div>
+									</div>
 								</div>
+							</div>
+						)
+					}
+
+					return (
+						<div className="bg-vscode-editor-background border rounded-xs p-1 overflow-hidden whitespace-pre-wrap relative group">
+							<div className="absolute top-1 right-1 flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
 								<Button
 									variant="ghost"
-									size="icon"
-									className="shrink-0"
+									size="sm"
+									className="h-4.5 w-4.5 p-0"
 									disabled={isStreaming}
+									title={t("common:actions.edit")}
+									onClick={(e) => {
+										e.stopPropagation()
+										handleStartEdit()
+									}}>
+									<span className="codicon codicon-edit" style={{ fontSize: "11px" }} />
+								</Button>
+								<Button
+									variant="ghost"
+									size="sm"
+									className="h-4.5 w-4.5 p-0"
+									disabled={isStreaming}
+									title={t("common:actions.delete")}
 									onClick={(e) => {
 										e.stopPropagation()
 										vscode.postMessage({ type: "deleteMessage", value: message.ts })
 									}}>
-									<span className="codicon codicon-trash" />
+									<span className="codicon codicon-trash" style={{ fontSize: "11px" }} />
 								</Button>
 							</div>
+							<div className="px-2 py-1 wrap-anywhere">
+								<Mention text={message.text} withShadow />
+							</div>
 							{message.images && message.images.length > 0 && (
 								<Thumbnails images={message.images} style={{ marginTop: "8px" }} />
 							)}
diff --git a/webview-ui/src/components/chat/__tests__/ChatView.test.tsx b/webview-ui/src/components/chat/__tests__/ChatView.test.tsx
index 5b618378c4..0948e4de99 100644
--- a/webview-ui/src/components/chat/__tests__/ChatView.test.tsx
+++ b/webview-ui/src/components/chat/__tests__/ChatView.test.tsx
@@ -1072,3 +1072,33 @@ describe("ChatView - Focus Grabbing Tests", () => {
 		expect(mockFocus).toHaveBeenCalledTimes(FOCUS_CALLS_ON_INIT)
 	})
 })
+
+describe("ChatView - Message Edit Tests", () => {
+	beforeEach(() => jest.clearAllMocks())
+
+	it("renders ChatView component without errors", () => {
+		const { container } = renderChatView()
+
+		// Verify the component renders
+		expect(container).toBeInTheDocument()
+	})
+
+	it("accepts message state updates", () => {
+		renderChatView()
+
+		// Mock a user message state
+		mockPostMessage({
+			clineMessages: [
+				{
+					type: "say",
+					say: "user_feedback",
+					ts: 1234567890,
+					text: "Test message",
+				},
+			],
+		})
+
+		// Verify no errors occurred during state update
+		expect(vscode.postMessage).toHaveBeenCalled()
+	})
+})
diff --git a/webview-ui/src/components/common/Thumbnails.tsx b/webview-ui/src/components/common/Thumbnails.tsx
index acdf5f4295..9fdf99c57d 100644
--- a/webview-ui/src/components/common/Thumbnails.tsx
+++ b/webview-ui/src/components/common/Thumbnails.tsx
@@ -36,6 +36,27 @@ const Thumbnails = ({ images, style, setImages, onHeightChange }: ThumbnailsProp
 		vscode.postMessage({ type: "openImage", text: image })
 	}
 
+	// Sanitize image URL to prevent XSS and malicious redirects
+	// Only allow data:image/ URLs since the backend openImage function only supports base64 data URIs
+	const sanitizeImageUrl = (url: string): string => {
+		try {
+			// Only allow data URLs (base64 images) - backend only supports these
+			if (url.startsWith("data:image/")) {
+				// Additional validation: ensure it's a proper data URI format
+				const dataUriRegex = /^data:image\/[a-zA-Z]+;base64,/
+				if (dataUriRegex.test(url)) {
+					return url
+				}
+			}
+
+			// Reject all other URLs (http, https, javascript, file, etc.)
+			return ""
+		} catch {
+			// Invalid URL, return empty string
+			return ""
+		}
+	}
+
 	return (
 		<div
 			ref={containerRef}
@@ -46,51 +67,59 @@ const Thumbnails = ({ images, style, setImages, onHeightChange }: ThumbnailsProp
 				rowGap: 3,
 				...style,
 			}}>
-			{images.map((image, index) => (
-				<div
-					key={index}
-					style={{ position: "relative" }}
-					onMouseEnter={() => setHoveredIndex(index)}
-					onMouseLeave={() => setHoveredIndex(null)}>
-					<img
-						src={image}
-						alt={`Thumbnail ${index + 1}`}
-						style={{
-							width: 34,
-							height: 34,
-							objectFit: "cover",
-							borderRadius: 4,
-							cursor: "pointer",
-						}}
-						onClick={() => handleImageClick(image)}
-					/>
-					{isDeletable && hoveredIndex === index && (
-						<div
-							onClick={() => handleDelete(index)}
+			{images.map((image, index) => {
+				const sanitizedUrl = sanitizeImageUrl(image)
+				// Skip rendering if URL is invalid/unsafe
+				if (!sanitizedUrl) {
+					return null
+				}
+
+				return (
+					<div
+						key={index}
+						style={{ position: "relative" }}
+						onMouseEnter={() => setHoveredIndex(index)}
+						onMouseLeave={() => setHoveredIndex(null)}>
+						<img
+							src={sanitizedUrl}
+							alt={`Thumbnail ${index + 1}`}
 							style={{
-								position: "absolute",
-								top: -4,
-								right: -4,
-								width: 13,
-								height: 13,
-								borderRadius: "50%",
-								backgroundColor: "var(--vscode-badge-background)",
-								display: "flex",
-								justifyContent: "center",
-								alignItems: "center",
+								width: 34,
+								height: 34,
+								objectFit: "cover",
+								borderRadius: 4,
 								cursor: "pointer",
-							}}>
-							<span
-								className="codicon codicon-close"
+							}}
+							onClick={() => handleImageClick(image)}
+						/>
+						{isDeletable && hoveredIndex === index && (
+							<div
+								onClick={() => handleDelete(index)}
 								style={{
-									color: "var(--vscode-foreground)",
-									fontSize: 10,
-									fontWeight: "bold",
-								}}></span>
-						</div>
-					)}
-				</div>
-			))}
+									position: "absolute",
+									top: -4,
+									right: -4,
+									width: 13,
+									height: 13,
+									borderRadius: "50%",
+									backgroundColor: "var(--vscode-badge-background)",
+									display: "flex",
+									justifyContent: "center",
+									alignItems: "center",
+									cursor: "pointer",
+								}}>
+								<span
+									className="codicon codicon-close"
+									style={{
+										color: "var(--vscode-foreground)",
+										fontSize: 10,
+										fontWeight: "bold",
+									}}></span>
+							</div>
+						)}
+					</div>
+				)
+			})}
 		</div>
 	)
 }
diff --git a/webview-ui/src/i18n/locales/ca/common.json b/webview-ui/src/i18n/locales/ca/common.json
index 267e0a62d7..3d66568729 100644
--- a/webview-ui/src/i18n/locales/ca/common.json
+++ b/webview-ui/src/i18n/locales/ca/common.json
@@ -6,6 +6,10 @@
 		"remove": "Eliminar",
 		"keep": "Mantenir"
 	},
+	"actions": {
+		"edit": "Editar",
+		"delete": "Suprimir"
+	},
 	"number_format": {
 		"thousand_suffix": "k",
 		"million_suffix": "m",
diff --git a/webview-ui/src/i18n/locales/de/common.json b/webview-ui/src/i18n/locales/de/common.json
index 76b9064bc3..08153f3fa0 100644
--- a/webview-ui/src/i18n/locales/de/common.json
+++ b/webview-ui/src/i18n/locales/de/common.json
@@ -6,6 +6,10 @@
 		"remove": "Entfernen",
 		"keep": "Behalten"
 	},
+	"actions": {
+		"edit": "Bearbeiten",
+		"delete": "Löschen"
+	},
 	"number_format": {
 		"thousand_suffix": "k",
 		"million_suffix": "m",
diff --git a/webview-ui/src/i18n/locales/en/common.json b/webview-ui/src/i18n/locales/en/common.json
index 1488f00f46..30a052d812 100644
--- a/webview-ui/src/i18n/locales/en/common.json
+++ b/webview-ui/src/i18n/locales/en/common.json
@@ -6,6 +6,10 @@
 		"remove": "Remove",
 		"keep": "Keep"
 	},
+	"actions": {
+		"edit": "Edit",
+		"delete": "Delete"
+	},
 	"number_format": {
 		"thousand_suffix": "k",
 		"million_suffix": "m",
diff --git a/webview-ui/src/i18n/locales/es/common.json b/webview-ui/src/i18n/locales/es/common.json
index 5fe624372f..9f78f9d6ef 100644
--- a/webview-ui/src/i18n/locales/es/common.json
+++ b/webview-ui/src/i18n/locales/es/common.json
@@ -6,6 +6,10 @@
 		"remove": "Eliminar",
 		"keep": "Mantener"
 	},
+	"actions": {
+		"edit": "Editar",
+		"delete": "Eliminar"
+	},
 	"number_format": {
 		"thousand_suffix": "k",
 		"million_suffix": "m",
diff --git a/webview-ui/src/i18n/locales/fr/common.json b/webview-ui/src/i18n/locales/fr/common.json
index 677116ff2a..e52808d885 100644
--- a/webview-ui/src/i18n/locales/fr/common.json
+++ b/webview-ui/src/i18n/locales/fr/common.json
@@ -6,6 +6,10 @@
 		"remove": "Supprimer",
 		"keep": "Conserver"
 	},
+	"actions": {
+		"edit": "Modifier",
+		"delete": "Supprimer"
+	},
 	"number_format": {
 		"thousand_suffix": "k",
 		"million_suffix": "m",
diff --git a/webview-ui/src/i18n/locales/hi/common.json b/webview-ui/src/i18n/locales/hi/common.json
index 77876eb274..e3c4a31573 100644
--- a/webview-ui/src/i18n/locales/hi/common.json
+++ b/webview-ui/src/i18n/locales/hi/common.json
@@ -6,6 +6,10 @@
 		"remove": "हटाएं",
 		"keep": "रखें"
 	},
+	"actions": {
+		"edit": "संपादित करें",
+		"delete": "हटाएं"
+	},
 	"number_format": {
 		"thousand_suffix": "k",
 		"million_suffix": "m",
diff --git a/webview-ui/src/i18n/locales/id/common.json b/webview-ui/src/i18n/locales/id/common.json
index d50246ced2..c6b5a601c3 100644
--- a/webview-ui/src/i18n/locales/id/common.json
+++ b/webview-ui/src/i18n/locales/id/common.json
@@ -6,6 +6,10 @@
 		"remove": "Hapus",
 		"keep": "Simpan"
 	},
+	"actions": {
+		"edit": "Ubah",
+		"delete": "Hapus"
+	},
 	"number_format": {
 		"thousand_suffix": "rb",
 		"million_suffix": "jt",
diff --git a/webview-ui/src/i18n/locales/it/common.json b/webview-ui/src/i18n/locales/it/common.json
index 9d5426aa0e..807f95cd02 100644
--- a/webview-ui/src/i18n/locales/it/common.json
+++ b/webview-ui/src/i18n/locales/it/common.json
@@ -6,6 +6,10 @@
 		"remove": "Rimuovi",
 		"keep": "Mantieni"
 	},
+	"actions": {
+		"edit": "Modifica",
+		"delete": "Elimina"
+	},
 	"number_format": {
 		"thousand_suffix": "k",
 		"million_suffix": "m",
diff --git a/webview-ui/src/i18n/locales/ja/common.json b/webview-ui/src/i18n/locales/ja/common.json
index 975ea67834..713e301371 100644
--- a/webview-ui/src/i18n/locales/ja/common.json
+++ b/webview-ui/src/i18n/locales/ja/common.json
@@ -6,6 +6,10 @@
 		"remove": "削除",
 		"keep": "保持"
 	},
+	"actions": {
+		"edit": "編集",
+		"delete": "削除"
+	},
 	"number_format": {
 		"thousand_suffix": "k",
 		"million_suffix": "m",
diff --git a/webview-ui/src/i18n/locales/ko/common.json b/webview-ui/src/i18n/locales/ko/common.json
index 276f2cb20b..ee7991ed67 100644
--- a/webview-ui/src/i18n/locales/ko/common.json
+++ b/webview-ui/src/i18n/locales/ko/common.json
@@ -6,6 +6,10 @@
 		"remove": "삭제",
 		"keep": "유지"
 	},
+	"actions": {
+		"edit": "편집",
+		"delete": "삭제"
+	},
 	"number_format": {
 		"thousand_suffix": "k",
 		"million_suffix": "m",
diff --git a/webview-ui/src/i18n/locales/nl/common.json b/webview-ui/src/i18n/locales/nl/common.json
index 012808e51a..9068482916 100644
--- a/webview-ui/src/i18n/locales/nl/common.json
+++ b/webview-ui/src/i18n/locales/nl/common.json
@@ -6,6 +6,10 @@
 		"remove": "Verwijderen",
 		"keep": "Behouden"
 	},
+	"actions": {
+		"edit": "Bewerken",
+		"delete": "Verwijderen"
+	},
 	"number_format": {
 		"thousand_suffix": "k",
 		"million_suffix": "m",
diff --git a/webview-ui/src/i18n/locales/pl/common.json b/webview-ui/src/i18n/locales/pl/common.json
index c72b046c42..fd0c981366 100644
--- a/webview-ui/src/i18n/locales/pl/common.json
+++ b/webview-ui/src/i18n/locales/pl/common.json
@@ -11,6 +11,10 @@
 		"remove": "Usuń",
 		"keep": "Zachowaj"
 	},
+	"actions": {
+		"edit": "Edytuj",
+		"delete": "Usuń"
+	},
 	"ui": {
 		"search_placeholder": "Szukaj..."
 	},
diff --git a/webview-ui/src/i18n/locales/pt-BR/common.json b/webview-ui/src/i18n/locales/pt-BR/common.json
index a911b2366f..a0f8a3ffd1 100644
--- a/webview-ui/src/i18n/locales/pt-BR/common.json
+++ b/webview-ui/src/i18n/locales/pt-BR/common.json
@@ -11,6 +11,10 @@
 		"remove": "Remover",
 		"keep": "Manter"
 	},
+	"actions": {
+		"edit": "Editar",
+		"delete": "Excluir"
+	},
 	"ui": {
 		"search_placeholder": "Pesquisar..."
 	},
diff --git a/webview-ui/src/i18n/locales/ru/common.json b/webview-ui/src/i18n/locales/ru/common.json
index e68899a2db..24a9e64d7f 100644
--- a/webview-ui/src/i18n/locales/ru/common.json
+++ b/webview-ui/src/i18n/locales/ru/common.json
@@ -11,6 +11,10 @@
 		"remove": "Удалить",
 		"keep": "Оставить"
 	},
+	"actions": {
+		"edit": "Редактировать",
+		"delete": "Удалить"
+	},
 	"ui": {
 		"search_placeholder": "Поиск..."
 	},
diff --git a/webview-ui/src/i18n/locales/tr/common.json b/webview-ui/src/i18n/locales/tr/common.json
index 23344ca966..f32207ad1d 100644
--- a/webview-ui/src/i18n/locales/tr/common.json
+++ b/webview-ui/src/i18n/locales/tr/common.json
@@ -6,6 +6,10 @@
 		"remove": "Kaldır",
 		"keep": "Tut"
 	},
+	"actions": {
+		"edit": "Düzenle",
+		"delete": "Sil"
+	},
 	"number_format": {
 		"thousand_suffix": "k",
 		"million_suffix": "m",
diff --git a/webview-ui/src/i18n/locales/vi/common.json b/webview-ui/src/i18n/locales/vi/common.json
index 16952117ef..90b9b009cc 100644
--- a/webview-ui/src/i18n/locales/vi/common.json
+++ b/webview-ui/src/i18n/locales/vi/common.json
@@ -6,6 +6,10 @@
 		"remove": "Xóa",
 		"keep": "Giữ"
 	},
+	"actions": {
+		"edit": "Chỉnh sửa",
+		"delete": "Xóa"
+	},
 	"number_format": {
 		"thousand_suffix": "k",
 		"million_suffix": "m",
diff --git a/webview-ui/src/i18n/locales/zh-CN/common.json b/webview-ui/src/i18n/locales/zh-CN/common.json
index 29f11c7f2f..4f55d38fcd 100644
--- a/webview-ui/src/i18n/locales/zh-CN/common.json
+++ b/webview-ui/src/i18n/locales/zh-CN/common.json
@@ -6,6 +6,10 @@
 		"remove": "移除",
 		"keep": "保留"
 	},
+	"actions": {
+		"edit": "编辑",
+		"delete": "删除"
+	},
 	"number_format": {
 		"thousand_suffix": "k",
 		"million_suffix": "m",
diff --git a/webview-ui/src/i18n/locales/zh-TW/common.json b/webview-ui/src/i18n/locales/zh-TW/common.json
index b8ec7f998e..db292b98e4 100644
--- a/webview-ui/src/i18n/locales/zh-TW/common.json
+++ b/webview-ui/src/i18n/locales/zh-TW/common.json
@@ -6,6 +6,10 @@
 		"remove": "移除",
 		"keep": "保留"
 	},
+	"actions": {
+		"edit": "編輯",
+		"delete": "刪除"
+	},
 	"number_format": {
 		"thousand_suffix": "k",
 		"million_suffix": "m",