fix(webview): render expanded task header text as markdown with consistent scrollbar

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

@@ -29,6 +29,8 @@ import { Mention } from "./Mention"
 import { TodoListDisplay } from "./TodoListDisplay"
 import { LucideIconButton } from "./LucideIconButton"
 
+import MarkdownBlock from "../common/MarkdownBlock"
+
 export interface TaskHeaderProps {
 	task: ClineMessage
 	tokensIn: number
@@ -324,13 +326,13 @@ const TaskHeader = ({
 							className="text-vscode-font-size overflow-y-auto break-words break-anywhere relative">
 							<div
 								ref={textRef}
-								className="overflow-auto max-h-80 whitespace-pre-wrap break-words break-anywhere cursor-text py-0.5"
+								className="scrollable overflow-auto max-h-80 break-words break-anywhere cursor-text py-0.5"
 								style={{
 									display: "-webkit-box",
 									WebkitLineClamp: "unset",
 									WebkitBoxOrient: "vertical",
 								}}>
-								<Mention text={task.text} />
+								<MarkdownBlock markdown={task.text ?? ""} />
 							</div>
 						</div>
 						{task.images && task.images.length > 0 && <Thumbnails images={task.images} />}

webview-ui/src/components/chat/__tests__/TaskHeader.spec.tsx

@@ -329,4 +329,42 @@ describe("TaskHeader", () => {
 			expect(screen.getByText("25%")).toBeInTheDocument()
 		})
 	})
+
+	describe("Expanded task text markdown rendering", () => {
+		it("shows raw source while collapsed and formatted markdown when expanded", async () => {
+			const { container } = renderTaskHeader({
+				task: { type: "say", ts: Date.now(), text: "**bold** and `code`", images: [] },
+			})
+
+			// Collapsed state renders the raw task text (no markdown formatting yet).
+			expect(screen.getByText("**bold** and `code`")).toBeInTheDocument()
+			expect(container.querySelector("strong")).toBeNull()
+
+			// Expand the header by clicking the collapsed title.
+			fireEvent.click(screen.getByText("**bold** and `code`"))
+
+			// Expanded state applies markdown: **bold** becomes <strong>, `code` becomes <code>.
+			const bold = await screen.findByText("bold")
+			expect(bold.tagName).toBe("STRONG")
+			expect(container.querySelector("code")?.textContent).toBe("code")
+
+			// The raw markdown source must not be displayed verbatim in the expanded view.
+			expect(screen.queryByText("**bold** and `code`")).not.toBeInTheDocument()
+		})
+
+		it("uses the shared scrollable style for the expanded prompt box", () => {
+			const { container } = renderTaskHeader({
+				task: { type: "say", ts: Date.now(), text: "prompt", images: [] },
+			})
+
+			// Expand the header.
+			fireEvent.click(screen.getByText("prompt"))
+
+			// The prompt box must use the VS Code-style .scrollable scrollbar (hover-reveal),
+			// not a default always-visible Chromium scrollbar, so it matches the message list.
+			const scrollBox = container.querySelector(".scrollable")
+			expect(scrollBox).not.toBeNull()
+			expect(scrollBox?.className).toContain("max-h-80")
+		})
+	})
 })