Add support for displaying reasoning for openrouter models

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

@@ -15,6 +15,7 @@ import { vscode } from "../../utils/vscode"
 import CodeAccordian, { removeLeadingNonAlphanumeric } from "../common/CodeAccordian"
 import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 import MarkdownBlock from "../common/MarkdownBlock"
+import ReasoningBlock from "./ReasoningBlock"
 import Thumbnails from "../common/Thumbnails"
 import McpResourceRow from "../mcp/McpResourceRow"
 import McpToolRow from "../mcp/McpToolRow"
@@ -79,6 +80,14 @@ export const ChatRowContent = ({
 	isStreaming,
 }: ChatRowContentProps) => {
 	const { mcpServers } = useExtensionState()
+	const [reasoningCollapsed, setReasoningCollapsed] = useState(false)
+
+	// Auto-collapse reasoning when new messages arrive
+	useEffect(() => {
+		if (!isLast && message.say === "reasoning") {
+			setReasoningCollapsed(true)
+		}
+	}, [isLast, message.say])
 	const [cost, apiReqCancelReason, apiReqStreamingFailedMessage] = useMemo(() => {
 		if (message.text != null && message.say === "api_req_started") {
 			const info: ClineApiReqInfo = JSON.parse(message.text)
@@ -472,6 +481,14 @@ export const ChatRowContent = ({
 	switch (message.type) {
 		case "say":
 			switch (message.say) {
+				case "reasoning":
+					return (
+						<ReasoningBlock
+							content={message.text || ""}
+							isCollapsed={reasoningCollapsed}
+							onToggleCollapse={() => setReasoningCollapsed(!reasoningCollapsed)}
+						/>
+					)
 				case "api_req_started":
 					return (
 						<>

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

@@ -0,0 +1,70 @@
+import React, { useEffect, useRef } from "react"
+import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
+import MarkdownBlock from "../common/MarkdownBlock"
+
+interface ReasoningBlockProps {
+	content: string
+	isCollapsed?: boolean
+	onToggleCollapse?: () => void
+	autoHeight?: boolean
+}
+
+const ReasoningBlock: React.FC<ReasoningBlockProps> = ({
+	content,
+	isCollapsed = false,
+	onToggleCollapse,
+	autoHeight = false,
+}) => {
+	const contentRef = useRef<HTMLDivElement>(null)
+
+	// Scroll to bottom when content updates
+	useEffect(() => {
+		if (contentRef.current && !isCollapsed) {
+			contentRef.current.scrollTop = contentRef.current.scrollHeight
+		}
+	}, [content, isCollapsed])
+
+	return (
+		<div
+			style={{
+				backgroundColor: CODE_BLOCK_BG_COLOR,
+				border: "1px solid var(--vscode-editorGroup-border)",
+				borderRadius: "3px",
+				overflow: "hidden",
+			}}>
+			<div
+				onClick={onToggleCollapse}
+				style={{
+					padding: "8px 12px",
+					cursor: "pointer",
+					userSelect: "none",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					borderBottom: isCollapsed ? "none" : "1px solid var(--vscode-editorGroup-border)",
+				}}>
+				<span style={{ fontWeight: "bold" }}>Reasoning</span>
+				<span className={`codicon codicon-chevron-${isCollapsed ? "right" : "down"}`}></span>
+			</div>
+			{!isCollapsed && (
+				<div
+					ref={contentRef}
+					style={{
+						padding: "8px 12px",
+						maxHeight: autoHeight ? "none" : "160px",
+						overflowY: "auto",
+					}}>
+					<div
+						style={{
+							fontSize: "13px",
+							opacity: 0.9,
+						}}>
+						<MarkdownBlock markdown={content} />
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}
+
+export default ReasoningBlock